Viewing JQuery selections

Question

Is it possible to see what items/elements I have selected in a particular jquery selection?

I saw someone demoing jquery and they used some form of console that returned an array of items for every selection, they could then mouseover each item and it would highlight it in the browser.

Im currently using alert($('div').length); to see what i've selected which isnt that helpful.

Answer 1

If this is purely for debugging you could log it to your javascript console:

$('div').each(function() {
    console.log($(this).id);
})

Note: I highly recommend the use of firebug, if you aren't using it already.

Answer 2

Some time ago I wrote a jquery plugin for this purpose.. It uses firebug's log console to log jquery selections. (if you don't use firebug for your web development, you really should consider it)

(function($){

function logThis()
{
    console.debug(this);
}

jQuery.fn.debug = function(msg)
{
    console.group(msg || "no message");
    this.each(logThis);
    console.groupEnd();
    return this;
};
})(jQuery);

to use it just call debug on a jquery selection with an optional message

$(".example").debug("nodes found")

Answer 3

All you need is Firebug and this one line in your code:

console.log(<<myJQuerySelection>>);

eg:

console.log($('div'));

Run your mouse over the results and they'll highlight on the page.

Answer 4

These are all good examples, one thing I do too is create a border around elements.

$('div').css({border: '1px solid red'});

You can then easily see in the browser what has been selected (unless some elements are hidden from the viewport). This is also handy when Firebug isn't installed/enabled.

Probably should use the CSS property 'outline' so it doesn't expand elements by 2 pixels.