jquery find versus context selection

Question

Having the following html snippet

<div class="something"> <p>Some text</p> </div> <div class="somethingElse"> <p>some other text</p> </div>

I think the following jquery snippets are identical (will have the same result):

$(".something").find("p").css("border", "1px solid red"); $("p", ".something").css("border", "1px solid red");

My question is, whether one snippet is better than the other and should be used

$(".something p") is actually the slowest method available because, apparently, jQuery will search from right to left, finding first all p elements in the document, then filtering them for the .something ancestor. $(".something").find("p") is the fastest, as per my answer below. — BrianFinkel
– BrianFinkel, Commented Jan 28, 2012 at 15:34
@Xr. jQuery is still a javascript, nothing more. This sintaxis just looks like css, there is no magic behind it that uses native css mechanics inside javascript, as i understand. — Max Yari
– Max Yari, Commented Apr 13, 2015 at 15:24
@MaxYari Indeed. But I think it's useful to keep one syntax rather than multiply the choices. For your information, JQuery is based on a selector library named Sizzle: sizzlejs.com — Xr.
– Xr., Commented Apr 21, 2015 at 8:10

BrianFinkel · Accepted Answer · 2012-01-28 15:36:59Z

66

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.

Results of performance comparison between jQuery context and jQuery find method

edited Jan 28, 2012 at 15:36

answered Jan 28, 2012 at 15:12

BrianFinkel

2,7273 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Grinn Over a year ago

I added a test for using the context the "right way" according to the above-mentioned article - by supplying a DOM Node for the second argument. Ironically, it's even slower: jsperf.com/jquery-find-vs-context-2/3

yoav barnea Over a year ago

your chart show the opposite from what you said. the red line is the context and it seems to be faster than the blue line(the find() method) Am i missing somthing?

yoav barnea Over a year ago

sorry,my confusion...at first glance it seems the opposite, but the x axis is: operations per second - so after undestanding that it makes sense

Gumbo · Accepted Answer · 2010-02-26 14:35:39Z

22

Both calls are identical. The latter call is translated into the former one. If you want to omit the translation step, use the former one.

answered Feb 26, 2010 at 14:35

Gumbo

657k112 gold badges792 silver badges852 bronze badges

6 Comments

SunnyRed Over a year ago

Might be obvious, but I am uncertain: Is this the same, when the outer selector is already a jQuery object? Like $sth.find('p') is slightly faster than $('p', $sth.)?

BrianFinkel Over a year ago

Live tests posted in my answer seem to demonstrate that the find method is always faster. Am I missing something?

Gumbo Over a year ago

@BrianFinkel $(selector, context) is ‘translated’ into $(context).find(selector) internally. That translation takes the additional time.

user1003545 Over a year ago

Here is the relevant part of the jQuery (1.10.2) source, for the curious: github.com/jquery/jquery/blob/1.10.2/src/core.js#L175-L183

Flak DiNenno Over a year ago

These calls are not the same... please see tests below

|

Tom Auger · Accepted Answer · 2013-11-28 21:54:23Z

I can think of one use case where using the context form might be preferable - in the case where the context is contained in a variable which might be null.

For example:

// Only affect matching items that are descendants of '#parent' do_something( $( '#parent' ) ); // Affect all matching items do_something(); function do_something( $parent_element ){ $( '.child', $parent_element ).each( function(){ } ); }

The second time do_something() is called, if we had used $parent_element.find() it would have failed, whereas in this example, if $parent_element is undefined or empty the context is null, thus: the entire document.

Admittedly this is an edge case, but it just came up in something I was working on, so thought I'd put it here for posterity.

dylanjha · Accepted Answer · 2013-12-12 00:31:22Z

Find is better, by 40%:

http://jsperf.com/jquery-find-vs-context-2/13

Note the difference:

$myDiv = $("myDiv") myDiv = "#myDiv"

when passing $myDiv, the jQuery element as the context, its about 10% slower than $.find. when passing in #myDiv, the jQuery selector as the context, its 40% slower than $.find.

$.find > context.

Collectives™ on Stack Overflow

jquery find versus context selection

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Linked

Related