Question:
I'm doing some tests to understand what's the difference between the simple use of an eq() and find() selector, 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 these 3 tests I realized that for find() work it must be accompanied with a tag, if I want to create a variable and store this selector, how can I access the objects of this element through the find() selector?
Example 2:
var $tab = $('table tbody tr');
$tab.find(':first'); // errado, fica no mesmo jeito do exemplo acima.
Detail, I found 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 between the eq() and find() selectors, 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 greater performance, not that it is something significant in front of the process, but is there a lot of difference?
Answer:
These two methods do different things.
.eq() selects elements within a collection, .find() selects elements from the children of elements of a collection.
In other words, one searches in already selected elements (horizontally) and the other in descent (crosswise).
You can example:
<div>
<p>Div A</p>
</div>
<div>
<p>Div B</p>
</div>
<div>
<p>Div C</p>
</div>
e no jQuery:
var divs = $('div');
via .eq() is possible to select one of the <div> but not the offspring.
via .find() is possible to select <p> elements but not a <div> .
Combining the two would be for example:
var divB = $('div').eq(1).find('p').html(); // Div B