Question

 <table width="600px" id='testTable'>
        <tr class="red"><td>this</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr class="red"><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr class="red"><td>this</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr class="red"><td>1</td></tr>
        <tr><td>1</td></tr>
        <tr><td>1</td></tr>
    </table>


.gray
{
    background-color:#dddddd;
}
.red
{
    color:Red;
}

    $(function () {
        $('#testTable tr.red:nth-child(odd)').addClass('gray');
       //this should select tr's with text=this, but its not happening
    });

我想在表格中选择class = red的所有赔率，但是没有发生。请帮忙

Answer 1

nth-child（odd）选择元素的 parent 的奇数成员，而不是选择器返回的集合的奇数成员。

您正在寻找：

$('#testTable tr.red').filter(':even').addClass('gray');

编辑：我想，实际上你想要的是偶数。这是一个基于0的索引。 Demo

Answer 2

.red和:nth-child(odd)的组合并不符合您的想法。这两部分中的每一部分仅适用于tr元素，而不适用于彼此。因此，它不会首先找到所有红色元素，然后突出显示其中的红色元素，它只选择两个“条件”都为真的行。

jQuery中有一个解决方案 - 首先只选择红色元素，然后使用每个元素：

$(function () {
    $('#testTable tr.red').each( function(i) {
        if ( i%2 == 1 )
            $(this).addClass('gray');
    });
});

Answer 3

为什么不尝试更长时间的啰嗦，比如

$(function() {
    $('#testTable tr:nth-child(odd)').each(function() {
        if($(this).hasClass('red')) { $(this).addClass('grey'); }
    });
});

这应该是你要求的

jquery中的第n个子选择器

3 个答案: