DOM Traversal Methods - MarkMail

Chapter 9
});
};
.text(message)
.hide()
.appendTo(this)
.fadeIn();
Now calling $('.log').log('foo') has the effect our global function call did
previously, but we can change the selector expression to target different log boxes.
Ideally, though, the .log method would be intelligent enough to locate the most
relevant box to use for the log message without an explicit selector. By exploiting the
context passed to the method, we can traverse the DOM to find the log box nearest
the selected element:
jQuery.fn.log = function(message) {
return this.each(function() {
$context = $(this);
while ($context.length) {
$log = $context.find('.log');
if ($log.length) {
$('')
.text(message).hide().appendTo($log).fadeIn();
break;
}
$context = $context.parent();
}
});
};
This code looks for a log message box within the matched elements, and if none is
found, walks up the DOM in search of one.
Finally, at times we require the ability to display the contents of an object. Printing
out the object itself yields something barely informative like [object Object], so
we can detect the argument type and do some of our own pretty-printing in the case
that an object is passed in:
jQuery.fn.log = function(message) {
if (typeof(message) == 'object') {
string = '{';
$.each(message, function(key, value) {
string += key + ': ' + value + ', ';
});
string += '}';
message = string;
[ 193 ]