Question

I’m curious. This:

$('div'), this $($('div')), and this $($($('div')))... and so on

Seem to all work as selectors for HTML elements. Does anyone know why this works, and if there are any actual (besides redundancy), problems that arise when doing this?

http://jsfiddle.net/NpT2b/

Answer 1

The jQuery function can take an existing jQuery object as its argument. This is documented and intentional behavior. Take a look at the manual here: http://api.jquery.com/jQuery/

It’s also not specific to HTML elements. $( $('#foo') ) would work.

One reason for this which I’ve exploited in the past is to let a function accept either a selector or a jQuery object. So I could write a function:

function excite(target) {
    $(target).append(' This is exciting!');
};

This is safe to call with excite('.foo'); or with excite( $('p:not(.exciting-already)').empty() );