What Is "Context" in Jquery Selector

Performance of jQuery selector with context

Context really helps when you have a much larger DOM that you are searching through. Searching for IDs is already very fast and context doesn't really help that much in that case. Where context can really make a difference is when you are selecting by tag name or class.

Try testing like this: http://jsbin.com/aciji4/4

you can really see the timing get better for context when you bump up number of items in the DOM like this: http://jsbin.com/aciji4/6

jQuery/cheerio selector, context and root - what's the difference?

jQuery, and in extension Cheerio, uses something called "context", and it does have a special meaning.

The context is where jQuery will search for the given selector, so in plain JS the equivalent would be

document.getElementById('#fruit');

where document is the context, and #fruit is the selector.

The default context in Cheerio is always document, unless another context is specifically given in the format

$(selector, context)

The selector only has context if it's two strings, separated by a comma, so something like this would still use document as context

$('#fruit, .apple')

and it would search for both elements, not one inside the other etc. because it's just one string, containing a comma, so it's not the same thing.

The first one of your examples is the only one with a special context, the other two has document as context, and are regular CSS selectors.

$('.apple', '#fruits')

^ This has context, and would be the exact same as $('#fruits').find('.apple')

$('ul .pear')

^ This does not have a special context, it just selects all .pear elements inside an UL

$('li[class=orange]')

^ This does not have a special context either, it selects all LI elements with a class attribute that perfectly matches orange, i.e. has no other classes

jquery find versus context selection

The calls are not identical.

According Brandon Aaron, who apparently worked on jQuery, and also according to the live tests here, the find method is always faster. See results in the screenshot below. Please comment if I am missing something.

With a 10% or greater difference in speed, depending on browser, it definitely seems worth using find.

Further explanation at Brandon's site is here.

What is the second argument in this jquery select statement?

The tbl in the above is another dom element. This is passed in as the (optional parameter) context:

jQuery( selector [, context ] )

...for the selector, in this case 'tr'.

source

---

So essentially this:

$('tr', tbl);

says return me everything that matches the selector 'tr' in the element(s) tbl.

---

Example

So given

<table>
  <tr>first</tr>
<table>
<table id="test">
   <tr>second</tr>
</table>

This returns varying results:

//context is global
$('tr') => first & second

//restrict the context to just the second table 
//by finding it and passing it into the selector
var tbl = $('#test');
$('tr', tbl) => just second

jQuery selector with null context is safe?

As far as i can see in the source code of the selector it just defaults back to document if an invalid context (e.g. null, false, undefined, ...) is given.

From the JQuery Source Code (https://github.com/jquery/jquery/blob/main/src/selector.js)

// nodeType defaults to 9, since context defaults to document
nodeType = context ? context.nodeType : 9;

jquery context selector vs .find()

The context selector $("a", container) is converted to find. find() will be faster but in most cases this could be ignored. I would go for find() as its syntax is quite stright forward for me. This post has performance comparison that would help you deciding which one you would use.

---

Related Topics