jquery - 组合选择器

Question

给定以下 HTML：

<table>
  <tr id="row1">
    <td class="CommandLinks">
      <input type="checkbox" class="CommandLinks" />
    </td>
    <td class="Class2">
      <input type="text" value="1">
    </td>
    <td class="Class3">
      <input type="text" value="1">
    </td>
    <td class="Class4">
      <input type="text" value="1">
    </td>
    <td class="Class5">
      <input type="text" value="1">
    </td>
  </tr>
  <tr id="row2">
    ...
  </tr>
  ...
</table>

我可以使用以下方法获取第一个复选框：

var row = $('tr#row1');
var checkbox = row.find('input[data-trackingid]');

然而，在我看来，有一点额外的开销，因为 jQuery 必须扫描行中的每个单元格。我在想类似的东西，row.find('tr[class=CommandLinks] > input[data-trackingid]')但我发现那行不通。

我怎样才能修改上面的查询，使它只在里面查找$('tr[class=CommandLinks]')？

注意：我意识到还有其他方法可以找到此复选框，但在我的实际应用程序中，我想按属性搜索，如上所示。

Answer 1

首先，你不需要做tr#row1. ID 选择器只会寻找一个。

只需使用以下内容，您不应该有任何性能问题：

var checkbox = $('#row1 .CommandLinks input[data-trackingid=foo]');

如下所示，它稍微快了一点，但不是很多！

jsPerf：http: //jsperf.com/jquerychildrenperf

Answer 2

这应该有效：

var row = $('tr#row1');
var checkbox = row.find('td.CommandLinks > input[data-trackingid]');

如果在该元素上设置了 data-trackingid。

或这个：

var row = $('tr#row1');
var checkbox = row.find('td.CommandLinks').find('> input[data-trackingid]');

这在 jQuery 中是等价的。