jquery：第一个选择器给第二个元素，而不是第一个

Question

我想从任何单元格中选择第一行，所以我只是写了javascript。

var curcontrol = $("#cellno_111"); 
    var firsttd= $(curcontrol).parents("table tbody tr:first"); 
    alert($(firsttd).text()); 

而我的表是低于

<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> 

当我使用find()它给了我正确的结果

var curcontrol = $("#cellno_111"); 
    var firsttd= $(curcontrol).parents("table tbody").find("tr:first"); 

但我只是想知道为什么上面的代码返回第二tr而不是第一个tr

这里是我的JSBIN http://jsbin.com/lisozuvade/1/watch?html,js,output

Answer 1

它失败的原因是因为拨打parents并且过滤器table tbody tr只会与直接父母TR相匹配。其他TR落在祖先之外，所以:first将匹配唯一的TR它发现。

如果你试试这个，你会看到正在发生的事情：

alert($(curcontrol).parents('table tbody tr')[0].outerHTML); 

返回此：

<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> 

那就试试这个：

alert($(curcontrol).parents('table tbody')[0].outerHTML); 

返回此：

<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/

所以，你的第一个例子中仅着眼于祖先（一个TR），并返回第一个匹配。第二个例子看起来更进一步备份树，然后找到全部TR s在tbody然后选择first之一。

优选的，稍快，方式是使用closest()和find()

例如

var curcontrol = $("#cellno_111"); 
var firsttd= $(curcontrol).closest("tbody").find("tr:first"); 

或更快，但（作为选择进行评估从右到左）：

var curcontrol = $("#cellno_111"); 
var firsttd= $(curcontrol).closest("tbody").find("tr").first(); 

例如http://jsfiddle.net/TrueBlueAussie/j28g27m1/1/

Answer 2

你问的#cellno_111父母，只有tr是。

另外请记住，:first就像.first()，因为它会过滤到匹配元素集中的第一个元素，它与作为第一个孩子的东西无关。如果你想要多个元素，这是第一个孩子，你应该使用:first-child。

.parents(table tbody tr:first)：查询元件的父母要tr其为table和tbody内，则选择第一个

.parents("table tbody").find("tr:first")：查询的元素的父母为tbody其为table内部，然后找到所有tr s在里面，然后选择其中的第一个

PS：我建议使用closest而不是parents作为祖先的前往DOM导航方法;大多数时候它更实用，更易于理解。

Answer 3

其实，你需要了解每个选择器在做什么。试着用几个console.log，你会看到：

$(curcontrol).parents(); 

这将返回一组元素。在这个集合中，只有1 tr，即您的curcontrol td标签的父级。

你的确可以通过添加额外的过滤器过滤此特定的一组：

$(curcontrol).parents("table tbody tr:first"); 

但正如我刚才解释，原来设置只包含一个单一的TR，所以返回的第一个实际上是唯一一个返回。

您的find()方法是不同的，您指定一个特定的（父）元素和find()您搜索槽儿童，这在这种情况下解释正确的行为。

Answer 4

如果我没有记错的cellno_111父层次是： trno_11 - >tbody - >table

在你的第一个例子中，第一tr父cellno_111认定为trno_11，而不是trno_10。它没有trno_10父项。

它与find()工作的原因，是因为你选择tbody然后搜索第一tr孩子tbody了。