What are the differences between find() and eq() selectors?

Question

I am conducting some tests to understand what is the difference of the simple use of a selector eq() and find(), to be able to select the first row of a table for example.

Example 1:

$('table tbody tr:first') // ok

$('table tbody tr').find(':first'); // errado - pega todos os elementos da tr

$('table tbody').find('tr:first'); // ok

In those 3 tests I realized that for the find() work it is necessary to be accompanied with a tag, if I want to create a variable and store this selector, as I will be able to access the objects of this element by the selector find()?

Example 2:

var $tab = $('table tbody tr');
$tab.find(':first'); // errado, fica no mesmo jeito do exemplo acima.

Detail, I found that can be accessed by eq():

Example 3:

$tab.eq('0'); // ok

Example 3 solves my problem, but there is some way to make it work using example 2?

What are the differences of the selector eq() and find() , besides knowing that eq() the exact index where the information is find() search for a matching item?

From the logic of how they work it seems that eq() has higher performance, not that it is something significant in the face of the process, but there is a lot of difference ?

Answer 1

These two methods do different things.

The .eq() selects elements within a collection, the .find() selects elements in the children of elements of a collection.

That is, a search in elements already selected (horizontally) and the other in the descent (transversally).

May example:

<div>
    <p>Div A</p>
</div>
<div>
    <p>Div B</p>
</div>
<div>
    <p>Div C</p>
</div>

and in jQuery:

var divs = $('div');

via .eq() it is possible to select one of the <div> but not the offspring.
via .find() it is possible to select the elements <p> but not a <div>.

Combining the two would be for example:

var divB = $('div').eq(1).find('p').html(); // Div B

Answer 2

In a short answer, there are many ways to do the same task, basically the difference is that:

• eq() uses the index number of the selection vector.
• filter() filter the selection items
• find() uses a sub-selector to filter (search for child elements).

The reason for this is that there are times when you can use a loop for or while to work your way eq, however if there is a selector (or combination of selectors) that do the service then you must use .filter and then eq can be expendable.

Had only used find when retrieving the nodes "children" and "grandchildren".

The most important thing is that there are many ways to do the same task, this is a feature of the programming, it will depend on where and when you will use and each function will be used in a specific need.

On performance

Probably eq() has better performance, but when you work your loop to extract only what interests then the time spent in the end may be the same, the performance varies a lot of where, as and when you will use, for example the html structure can affect for example, the only way to be sure is you doing the tests.

How to test performance

There are some online tools an example is the https:/jsperf.com, I have personally used, follows an example:

• http://jsperf.com/bitcheck-vs-arithmetic-odd-and-even