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

Navigation
4

I'm running some tests to understand what is the difference between simple use of a selector eq() and find() , so that you can 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 these 3 tests I realized that for find() to work it is necessary to be accompanied by a tag, if I want to create a variable and store this selector, how can I access the objects of this element by the find() selector?

Example 2: 

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

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

Example 3: 

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

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

What are the differences of the selector eq() and find() , besides knowing that eq() must be informed the exact index where the information is and find() searches for a corresponding item?

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

    
asked by anonymous 15.10.2015 / 18:53

2 answers

5

These two methods do different things.

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

That is, a search on elements already selected (horizontally) and the other on the progeny (across).

For 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 progeny. 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
    
15.10.2015 / 20:43
4

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

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

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

Use only find when fetching the "children" and "grandchild" nodes.

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

About performance

Probably eq() has better performance, but when you work your loop to extract only what matters then the time spent in the end may be the same, performance varies greatly from where , how and when you will use, eg 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 link , I've personally used it, here's an example:

15.10.2015 / 18:59
Comparing an array element with a string What is the purpose of the size_t and ssize_t commands in C?