CODEWITHSUNDEEP
jquery
Jijoy
Jijoy

Reputation: 12724

Which of these two jQuery methods of finding a table row is faster?

Using jQuery, I can find table row in the following ways.

Which one is faster? Or is there not much difference?

$('myTable').find('tr')

or 

$('myTable tr')

Upvotes: 3

Views: 110

Answers (7)

gion_13
gion_13

Reputation: 41533

I think that it is just a matter of personal preference.
Technically speaking the find method should be faster because the first one is translated into the find syntax.
I don't think that you should be concerned about which one is faster. You should use the one that suits best for your app. For example, if you want to call more methods on the main object, you should use find : 

$('myTable')
    .aTableMethod()
    .find('tr')
        .aTrMethod()
        .end()
    .someOtherTableMethod();

On the other hand, if you only want to select an object's children and you're not going to do anything with the object itself, you should stick to the complex selector : 

$('parent child');

My advice is to choose readability over minor (really minor) optimizations, unless you have strict specifications to do so. This way your code is easier to understand, debug and maintain.

Upvotes: 1

a'r
a'r

Reputation: 37009

In general, the simple selectors are the fastest, eg. #myId, .myClass. This is because they are translated to the native browser functions getElementById and getElementsByClassName.

So, finding the parent element first and then using find should be slightly quicker. See here for more info.

Upvotes: 0

Yannis
Yannis

Reputation: 6157

I think $('myTable tr') is merely a shortcut for $('myTable').find('tr') – so you are better off using find() as opposed to the context parameter. By using find(), you are eliminating a function call which is always good ;)

Upvotes: 0

James Allardice
James Allardice

Reputation: 166021

There is very little difference in the real world, but find is slightly faster (in Chrome at least). Here's the results from a benchmark:

enter image description here

Note that the test uses table instead of myTable because I assumed that's what you intended.

Also note that even though it looks like a huge difference in the screenshot above, it's really not significant.

Upvotes: 1

odrm
odrm

Reputation: 5259

The fastest way to identify nodes is to identify them by id, e.g. $('#myTable'). Next, your second example will invoke the kQuery parser only once, whereas the first example will invoke it twice - the second is faster.

Upvotes: 0

Lapple
Lapple

Reputation: 3373

$('myTable tr') is automatically converted to $('myTable').find('tr') behind the scenes, so the latter is faster.

Upvotes: 0

James Hill
James Hill

Reputation: 61832

It's really personal preference. There is no real advantage from a coding perspective. According to jQuery's .find() docs:

Selector context is implemented with the .find() method; therefore, $('li.item-ii').find('li') is equivalent to $('li', 'li.item-ii').

Personal opinion: Since $('myTable tr') is more concise and still very readable, it's my preference.

Upvotes: 2

Related Questions