2

我想知道,是否可以<tr>从满足多个条件的<table>地方选择 's 。<td>例如(见最后的示例表):

获取<tr>第一列为“Audi”且第二列为“red”的所有内容

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

$('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>

感谢您的帮助!

4

2 回答 2

7

使用该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();
于 2012-11-23T12:10:10.810 回答
1

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

手册

因为:has()是 jQuery 扩展而不是 CSS 规范的一部分,所以使用的查询:has()不能利用原生 DOMquerySelectorAll() 方法提供的性能提升。为了在现代浏览器中获得更好的性能,请 $("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 演示

于 2012-11-23T12:12:54.240 回答