Question

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

获取所有$('tr:has(td:nth-child(1):contains("Audi"))').doSomeThing();的第一列为“Audi” AND 第二列为 “红色”

我已经找到了如何通过一个柱子过滤：

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

但我的问题是如何过滤 AND 条件，如：

<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>

我知道有Multiple Attribute Selector，但是因为我正在搜索.text（）属性，所以它不适合我的问题。

我的样本表：

{{1}}

Thanx为你提供帮助！

Answer 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();

Answer 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

jQuery：选择tr，其中td符合多个标准

2 个答案: