22

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??

Dave
  • 3,581
  • 1
  • 22
  • 25
  • 1
    The first syntax is useful for when the context is cached and you want to do quick queries on it. However as mentioned in one of the answers, it's euqal to $( '#...' ).find( 'tr' ). The second syntax is recommended for the sake of readability if the caching is not important. Remember that when you cache something, it's going to take up memory so sometimes the overhead doesn't worth it. – AlexStack Jul 16 '13 at 08:21
  • related https://stackoverflow.com/q/16422478/125981 TO ME, the second form/format is NOT recommended given the reasoning in the linked question regarding how the sizzle engine internally processes especially on a large DOM – Mark Schultheiss May 28 '21 at 16:18

4 Answers4

17

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.

Matt
  • 74,352
  • 26
  • 153
  • 180
Ronald Wildenberg
  • 31,634
  • 14
  • 90
  • 133
  • Is this the same as using `$(el).find('tr')`? If so, any idea of which is more performant? – ksav Aug 15 '17 at 23:49
14

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.

jensgram
  • 31,109
  • 6
  • 81
  • 98
  • What about jQuery("tr, #ctl00_MainContent_MyUserControl"); - is this the same? (no quotes) – Adamantus Jan 23 '19 at 13:19
  • 2
    @Adamantus No, single-string input to `jQuery` is treated as a CSS selector, equal to qualifying `tr, #ctl100… { … }` in a stylesheet. I.e., _all_ `` elements _and_ the element with ID `ctl1000…`. Makes sense? – jensgram Jan 24 '19 at 09:20
  • Just to be clear "which also happens to be the same as" is not entirely true here internally in jQuery using `jQuery("#ctl00_MainContent_MyUserControl tr");` it selects ALL `tr` in the entire document, then selects those within that id thus `jQuery("#ctl00_MainContent_MyUserControl").find('tr')` is more efficient the ID selector being very fast. This is especially true in a very large DOM and/or older browsers – Mark Schultheiss May 28 '21 at 16:15
  • More notes on context here from various folks https://stackoverflow.com/q/16422478/125981 – Mark Schultheiss May 28 '21 at 16:15
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".

Matt
  • 74,352
  • 26
  • 153
  • 180
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/

Phil
  • 157,677
  • 23
  • 242
  • 245