在 jQuery 中需要一个“HAS A”选择器答案

【问题标题】：Need a "HAS A" selector in jQuery在 jQuery 中需要一个“HAS A”选择器
【发布时间】：2012-02-15 21:11:19
【问题描述】：

我需要一个选择器，上面写着：

任何包含复选框的表格单元格

现在，我正在使用：

$('td input').filter(':checkbox').each(function() {
   $(this).closest('td').addClass('CursorPointer');
});
$('td.CursorPointer').on('click',function() {
   $('input:checkbox',this).click();
});

它有效，但它可能不是“最好的”。

【问题讨论】：

标签： jquery jquery-selectors css-selectors

【解决方案1】：

使用the :has() selector 或the has() method：

// select all <td> elements that have a checkbox in them
$('td:has(input:checkbox)');
// same effect
$('td').has('input:checkbox');

请注意，input:checkbox 等同于 Sizzle/jQuery 中的 input[type="checkbox"]。

您的代码示例可以重写为：

$('td:has(input:checkbox)').on('click', function() {
  $('input:checkbox', this).click();
});

或者……

$('td').has('input:checkbox').on('click', function() {
  $('input:checkbox', this).click();
});

请注意，.has() 比 :has 更有效：http://jsperf.com/jquery-has-vs-has 尽管:has() 恕我直言，可读性略高。

【讨论】：

虽然语法更好，但调用.has() 不是更快吗？
@melee .has() 可能更快，因为它避免了 Sizzle 的自定义伪类（这意味着可以在可用时使用 qSA）。 OTOH，.has() 确实引入了一个额外的函数调用。为什么不jsPerf呢？ ;)
@MathiasBynens 我写性能测试很糟糕，哈哈
好的，我试了一下，我不知道我是怎么做到的，但是欢迎反馈！ jsperf.com/hashas
@Melee 我已经编辑了您的测试并对其进行了一些简化。此外，显然我在 2010 年创建了一个类似的测试：jsperf.com/jquery-has-vs-has

【解决方案2】：

怎么样：

$('td').has('input[type="checkbox"]').addClass('CursorPointer');

这是一个例子jsFiddle。

【讨论】：

【解决方案3】：

$("td:has(:checkbox)") 不做你想做的事吗？你试过了吗？

【讨论】：

对于 JavaScript，我总是在 StackOverflow 上询问，因为解决方案不是我自己想出来的。