jQuery：选择 tr 的 td 满足多个条件

Posted 2023-05-09

【中文标题】jQuery：选择 tr 的 td 满足多个条件

【英文标题】：jQuery: select tr's where td's meeting multiple criterias

【发布时间】：2012-11-11 19:19:23

【问题描述】：

我想知道，是否可以从<table> 中选择<tr>，其中<td> 满足多个条件。例如（见最后的示例表）：

获取所有<tr> 的第一列是“Audi”AND 第二列是 “红”

我已经知道如何按一列过滤：

$('tr:has(td:nth-child(1):contains("Audi"))').doSomeThing();

但我的问题是如何使用 AND 条件进行过滤，例如：

$('tr:has(td:nth-child(1):contains("Audi") && td:nth-child(2):contains("red"))').doSomeThing();

我知道有 Multiple Attribute Selector，但由于我正在搜索 .text() 属性，它不适合我的问题。

我的示例表：

<table id="list">
<tr>
    <td>Audi</td>
    <td>red</td>
</tr>
<tr>
    <td>Audi</td>
    <td>yellow</td>
</tr>
<tr>
    <td>Audi</td>
    <td>green</td>
</tr>
<tr>
    <td>BMW</td>
    <td>red</td>
</tr>
<tr>
    <td>BMW</td>
    <td>yellow</td>
</tr>
<tr>
    <td>BMW</td>
    <td>green</td>
</tr>
    ...
</table>

感谢您的帮助！

【问题讨论】：

$('tr:has(td:nth-child(1):contains("Audi")):has(td:nth-child(2):contains("red")) ') 应该可以工作

perfekt - 像魅力一样工作！

【参考方案1】：

使用filter 方法根据其他条件缩小您的初始选择范围。

$('tr:has(td:nth-child(1):contains("Audi"))').filter(':has(td:nth-child(2):contains("red"))').doSomeThing();

如果您正在寻找单个选择器，这里是可读性较差的：

$('tr:has(td:nth-child(1):contains("Audi")):has(td:nth-child(2):contains("red"))').doSomeThing();

这是一个演示：http://jsfiddle.net/8Mnsf/2/

您还可以通过以下方式提高可读性：

$('tr')
    .has('td:nth-child(1):contains("Audi")')
    .has('td:nth-child(2):contains("red")')
    .doSomeThing();

【讨论】：

您至少应该使用.has() 方法而不是:has 选择器。这样会好一些。

@chumkiu 我非常怀疑我的代码比 bažmegakapa 的要快，尽管它确实具有单行的好处。

@Asad 这有什么好处吗？

@bažmegakapa 完成。是的，是的。

@chumkiu,bazmegakapa 这是一个 jsPerf 测试：jsperf.com/has-vs-has-vs-filter 如您所见，bazmegakapa 的解决方案胜出一英里。

【参考方案2】：

您最好的选择是使用filter() 方法。在大多数情况下，依赖 jQuery 的自定义选择器（:contains、:has 等）并不是最好的主意，因为原生的querySelectorAll() 在可用时无法使用，这可能会成为性能问题。

来自manual：

因为:has() 是一个 jQuery 扩展而不是 CSS 的一部分 规范，使用 :has() 的查询不能利用 原生 DOM 提供的性能提升 querySelectorAll() 方法。为了在现代浏览器中获得更好的性能，请使用 $("your-pure-css-selector").has(selector/DOMElement) 代替。

像这样的选择器也难以阅读，因此它也降低了可维护性。 filter() 方法是简单易读的代码，如果需要也可以进行合理的注释。

类似这样的：

$('tr').filter(function () 
    var $cells = $(this).children('td');
    return $cells.first().text() === 'Audi'
         && $cells.eq(1).text() === 'red';
);

jsFiddle Demo

【讨论】：

thanx，这也是一个不错的解决方案！很高兴知道背景信息