[英]Jquery :first selector give second element instead of first
I want select first row from any cell so I just wrote javascript like. 我想从任何单元格中选择第一行,所以我只写了javascript。
var curcontrol = $("#cellno_111");
var firsttd= $(curcontrol).parents("table tbody tr:first");
alert($(firsttd).text());
And my table is below 我的桌子在下面
<table id="idTable_1" border="1px" width="97%" class="tblDragTable" data-numberofrows="2" data-numberofcolumns="2">
<tbody>
<tr id="trno_10">
<td class="tblCell" id="cellno_100">0</td>
<td class="tblCell" id="cellno_101">0</td>
</tr>
<tr id="trno_11" height="1">
<td class="tblCell" id="cellno_110" width="1">1</td>
<td class="tblCell selectedCell" id="cellno_111" width="1">1</td>
</tr>
</tbody>
</table>
when I use find()
it giving me correct result 当我使用
find()
它给我正确的结果
var curcontrol = $("#cellno_111");
var firsttd= $(curcontrol).parents("table tbody").find("tr:first");
But I just want to know why the above code return second tr
instead of first tr
但是我只想知道为什么上面的代码返回第二个
tr
而不是第一个tr
HERE IS MY JSBIN http://jsbin.com/lisozuvade/1/watch?html,js,output 这是我的JSBIN http://jsbin.com/lisozuvade/1/watch?html,js,输出
You're asking for parents of #cellno_111
, only that tr
is. 您要的是
#cellno_111
父母,只有那个tr
是。
Also keep in mind that :first
is like .first()
as it filters to the first element in the set of matched elements, it has nothing to do with being the first child of something. 还请记住
:first
就像.first()
一样,因为它过滤匹配的元素集中的第一个元素,与成为某物的第一个孩子无关。 If you want multiple elements, which are first children you should use :first-child
. 如果您想要多个元素(
:first-child
元素),则应使用:first-child
。
.parents(table tbody tr:first)
: query the parents of the element for a tr
which is inside of table
and tbody
, then pick the first .parents(table tbody tr:first)
:查询元素的父级以获取位于table
和tbody
内的tr
,然后选择第一个
.parents("table tbody").find("tr:first")
: query the parents of the elements for a tbody
which is inside a table
, then find all tr
s inside of it, then pick the first of them .parents("table tbody").find("tr:first")
:查询元素的父级以获取table
内的tbody
,然后查找其中的所有tr
,然后选择其中的第一个
PS: I suggest using closest
instead of parents
as the go-to DOM navigation method for ancestors; PS:我建议使用
closest
而不是parents
作为祖先的DOM导航方法。 most of the times it's way more practical and easier to understand. 在大多数情况下,它更实用,更容易理解。
The reason why it fails is because calling parents
with a filter of table tbody tr
will only match the immediate parent TR
. 它失败的原因是因为使用
table tbody tr
的过滤器调用parents
只会匹配直接父对象TR
。 The other TR falls outside of the ancestors so :first
will match the only TR
it finds. 另一个TR不在祖先之外,因此
:first
将匹配它找到的唯一 TR
。
If you try this you will see what is going on: 如果您尝试此操作,将会看到发生了什么:
alert($(curcontrol).parents('table tbody tr')[0].outerHTML);
returns this: 返回此:
<tr id="trno_11" height="1">
<td class="tblCell" id="cellno_110" width="1">1</td>
<td class="tblCell selectedCell" id="cellno_111" width="1">1</td>
</tr>
then try this: 然后试试这个:
alert($(curcontrol).parents('table tbody')[0].outerHTML);
which returns this: 返回以下内容:
<tbody>
<tr id="trno_10">
<td class="tblCell" id="cellno_100">0</td>
<td class="tblCell" id="cellno_101">0</td>
</tr>
<tr id="trno_11" height="1">
<td class="tblCell" id="cellno_110" width="1">1</td>
<td class="tblCell selectedCell" id="cellno_111" width="1">1</td>
</tr>
</tbody>
JSFiddle: http://jsfiddle.net/TrueBlueAussie/j28g27m1/ JSFiddle: http : //jsfiddle.net/TrueBlueAussie/j28g27m1/
So your first example only looks at the ancestors (one TR
) and returns the first match. 因此,您的第一个示例仅查看祖先(一个
TR
)并返回第一个匹配项。 The second example looks further back up the tree, then finds all TR
s in the tbody
then chooses the first
one. 第二个示例进一步查看树的备份,然后在
tbody
找到所有 TR
,然后选择first
一个。
A preferred, slightly faster, way would be to use closest()
and find()
一种优选的,稍微快一点的方法是使用
closest()
和find()
eg 例如
var curcontrol = $("#cellno_111");
var firsttd= $(curcontrol).closest("tbody").find("tr:first");
or faster yet (as selectors are evaluated right-to-left): 或更快(因为选择器的评估是从右到左):
var curcontrol = $("#cellno_111");
var firsttd= $(curcontrol).closest("tbody").find("tr").first();
eg http://jsfiddle.net/TrueBlueAussie/j28g27m1/1/ 例如http://jsfiddle.net/TrueBlueAussie/j28g27m1/1/
Actually, you need to understand what each selector is doing. 实际上,您需要了解每个选择器在做什么。 Try with several console.log, you'll see:
尝试使用几个console.log,您将看到:
$(curcontrol).parents();
This return a set of elements. 这将返回一组元素。 In this set, there is only 1
tr
, the parent of your curcontrol
td tag. 在此集合中,只有1
tr
,是curcontrol
td标签的父curcontrol
。
You can indeed filter this specific set by adding a extra filter : 您确实可以通过添加额外的过滤器来过滤此特定集合:
$(curcontrol).parents("table tbody tr:first");
But as I just explained, the original set only contains a single TR, so the first one returned is actually the only one returned. 但是正如我刚刚解释的那样,原始集合仅包含一个TR,因此返回的第一个实际上是唯一返回的一个。
Your find()
approach is different, you specify a specific (parent) element and with the find()
you search trough children, which explains in this case the correct behaviour. 您的
find()
方法是不同的,您指定一个特定的(父)元素,并使用find()
搜索低级子级,这在这种情况下说明了正确的行为。
If I'm not mistaken, the parent hierarchy of cellno_111
is: trno_11
-> tbody
-> table
如果我没有记错,母公司层次
cellno_111
是: trno_11
- > tbody
- > table
In your first example, the first tr
parent cellno_111
finds is trno_11
and not trno_10
. 在您的第一个示例中,第一个
tr
父cellno_111
找到的是trno_11
而不是trno_10
。 It does not have a trno_10
parent. 它没有
trno_10
父对象。
The reason it does work with find()
, is because you select the tbody
and then search for the first tr
child the tbody
has. 它与
find()
一起使用的原因是,您选择了tbody
,然后搜索了tbody
拥有的第一个tr
子代。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.