I'm doing some tests to understand what's the difference between the simple use of an
find() selector, to be able to select the first row of a table for example.
$('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
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
$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
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?
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');
.eq() is possible to select one of the
<div> but not the offspring.
.find() is possible to select
<p> elements but not a
Combining the two would be for example:
var divB = $('div').eq(1).find('p').html(); // Div B