javascript - jQuery :first selector give second element instead of first

Question

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

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

我的 table 在下面

<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

失败的原因是使用 table tbody tr 过滤器调用 parents 只会匹配直接父级 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)并返回第一个匹配项。第二个示例进一步查看树，然后找到 tbody 中的所有 TR，然后选择第一个一个。

一种首选的、稍微快一点的方法是使用 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/