jQuery 选择多个 :nth-child()答案

【问题标题】：jQuery select multiple :nth-child()jQuery 选择多个 :nth-child()
【发布时间】：2012-06-22 03:30:55
【问题描述】：

这是我的表，使用 tr 和 td。

NAME Address CITY STATE 
ABC   123    A     CA 
AB8   123    B     CA
AFC   456    B     TX 
POI   985    C     KJ

文件准备好后，它会全部隐藏。

现在我想要一行来显示所有 tr 拥有： -> 列 (4) = CA “和”列 (3) = B

我厌倦了我的代码：

$("table[id=maintablex] tr td:nth-child(4):contains('CA'), table[id=maintablex] tr td:nth-child(3):contains('B')").closest('tr').show();

但它显示所有东西都有 (4) = CA 和 (3) = B...我的代码是 "OR" ，有人可以帮我吗？

添加了完整的 HTML 代码：

<table id="table">
    <tr>
        <td>ABC</td>
        <td>123</td>
        <td>A</td>
        <td>CA</td>
    </tr>
    <tr>
        <td>ABC</td>
        <td>1234</td>
        <td>B</td>
        <td>CA</td>
    </tr>
    <tr>
        <td>AUF</td>
        <td>123</td>
        <td>C</td>
        <td>TX</td>
    </tr>
    <tr>
        <td>ABC</td>
        <td>456</td>
        <td>B</td>
        <td>TX</td>
    </tr>
</table>
<script language="Javascript">
$("table[id=table] tr").hide();

// Code show here


</script>

我要显示的结果只有：

AB8   123    B     CA

【问题讨论】：

我建议将table[id=maintablex] 替换为#maintablex，它的执行速度会大大。这是一个要证明的jsperf：jsperf.com/jquery-id-vs-id-attribute
是的，添加 #table ，它运行得更快。

标签： javascript jquery jquery-selectors selection

【解决方案1】：

为什么不这样做：

$("table[id=maintablex] tr td:nth-child(3):contains('B')", 
    $("table[id=maintablex] tr td:nth-child(4):contains('CA')")
).closest('tr').show();

我不知道这是否更快，但根据@Jasper 的回复，为什么不这样做：

//select the table, find all `<td>` elements that contain `CA` and iterate through each of them
$('#table')
    .find('td:nth-child(4):contains("CA")')
    .closest('tr')
    .find('td:nth-child(3):contains("B")')
    .closest('tr')
    .addClass('active');

这是 jsfiddle：http://jsfiddle.net/KQMXe/

【讨论】：

是的，现在可以了。但我不知道它是否更快。但我喜欢它.. 我真的不喜欢 Loop $each

【解决方案2】：

您的第一个选择器始终会匹配 State = CA 和 State = B 的行。我会把它分成两部分。尚未测试此代码，但它应该可以让您接近...

var stateRows = ("#maintablex tr td:nth-child(4):contains('CA')").parent();
var matchRows = stateRows.find("td:nth-child(3):contains('B')").parent();

matchRows.doWhateverYouLikeWithTheResults();

【讨论】：

整洁的代码，易于在 Firebug 中测试。我只需要修正引号。

【解决方案3】：

JS--

//select the table, find all `<td>` elements that contain `CA` and iterate through each of them
$('#maintablex').find('td:nth-child(4):contains("CA")').each(function (index, value) {

    //un-hide the parent `<tr>` element of this `<td>` by adding the `active` class to the `<tr>`
    $(this).parents('tr:first').addClass('active');
});

CSS-

/*Hide all the table rows by default*/
tr {
    display : none;
}

/*declare a class that shows the table rows when added to them*/
tr.active {
    display : table-row;
}

更新

我更新了上面的代码，只在每一行中寻找第三列（我之前省略了那部分答案）。

这是一个 jsfiddle：http://jsfiddle.net/jasper/Mp7Jq/3/

【讨论】：

兄弟，但该表将有 500 - 1000 行。那么，使用 .each() 仍然很快吗？我认为 .each 会随着循环变慢，这就是为什么我想尝试使用 jQuery 进行 1 选择。

【解决方案4】：

试试这个

$.each($('table#table tr td:nth-child(4):contains("CA")').parent(),function(){
    if(($.inArray(this, $('table#table tr td:nth-child(3):contains("B")').parent())) > -1){
        $(this).show();
    }
});

希望这会有所帮助。 :)

【讨论】：