Comma separated list of selectors?

Question

I'm refactoring some code at the moment and have come across a selector:

jQuery("tr","#ctl00_MainContent_MyUserControl").each(function(i,row) { ... }

It looks like it's selecting <tr>'s from the user control on the page (ignore the fact that the instance is fully named!) but it's not a syntax I'm familiar with and can't find anything in the documentation. I'd expect it to be written:

$("#ctl00_MainContent_MyUserControl tr").each(function(i,row) { ... }

Can anyone tell me if there's a difference (subtle or otherwise) that I'm missing here??

Answer 1

This selector selects all tr elements inside an element with id ctl00_MainContent_MyUserControl. It is exactly the same as your second example.

The second parameter provides a context for the first parameter. There are better use cases for this syntax, for example:

function(el) {
    $('tr', el).each(...);
}

Where el is some element on your page. In this case, you can't use the second syntax form.

Answer 2

The second argument to the jQuery constructor (when the first is a selector) is the context.

From the API docs

context A DOM Element, Document, or jQuery to use as context

See http://api.jquery.com/jQuery/

Answer 3

It's exactly the same. It could also have been written:

$("#ctl00_MainContent_MyUserControl").find("tr").each(function(i,row) { ... }

The syntax for the former can be seen in the jQuery constructor documentation. It's basically "find all elements that matches the first selector, that's a descendant of the second matched by the second".

Answer 4

Calling the jQuery() method with two arguments (selector and context) is equivalent to jQuery(context).find(selector). Thus:

jQuery("tr","#ctl00_MainContent_MyUserControl");

is equal to:

jQuery("#ctl00_MainContent_MyUserControl").find("tr");

which also happens to be the same as:

jQuery("#ctl00_MainContent_MyUserControl tr");

---

My personal opinion is that the use of context only makes sense when you can pass an already selected element (jQuery or DOM), not so much when you just pass a selector (String). In that case I simply prefer to mimic the CSS selector: e.g., #ctl00_MainContent_MyUserControl tr.