组合选择器

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中是等效的。