Question

第一个代码块中的代码是源代码。源代码运行后。代码将被更改（请参阅第二个代码块）。

我希望标签的类（即“偶数”和“奇数”）仅显示在“table1”中。但是，目前一个巢表（即'table2'）也有每个标签的'偶数'和'奇数'类。

任何人都可以帮助我吗？提前谢谢。

-----------第一个代码块--------------

<head>
<script type="text/javascript">
            $(document).ready(function(){
                $("#table1 tr:odd").addClass("odd");
                $("#table1 tr:not(.odd)").addClass("even");  
            });
</script>
</head>

<body>

<table id="table1">
    <tr>
        <td>AAA</td>
        <td>CCC</td>
    </tr>
    <tr>
        <td>BBB</td>
        <td>DDD</td>
    </tr>
    <tr>
        <td>
            <table id="table2">
                   <tr></tr>
                   <tr></tr>
            <table>
        </td>
    </tr>

</table>
</body>

-----------第二代码块---------------

<table id="table1">
    <tr class="even">
        <td>AAA</td>
        <td>CCC</td>
    </tr>
    <tr class="odd">
        <td>BBB</td>
        <td>DDD</td>
    </tr>
    <tr class="even">
        <td>
            <table id="table2">
                   <tr class="even"></tr>
                   <tr class="odd"></tr>
            <table>
        </td>
    </tr>

</table>

Answer 1

所有公布的答案几乎都是正确的。

$(document).ready(function(){
    $("#table1 > tbody > tr:odd").addClass("odd");
    $("#table1 > tbody > tr:not(.odd)").addClass("even");  
});

即使您没有自己添加tbody，许多浏览器也会自动为您的表添加#table1 > tr。因此tr不匹配，因为table不是tbody的直接子项。您最好的选择是使用上述内容并为那些不适合您的浏览器明确添加<table id="table1"> <tbody> <tr class="even"> <td>AAA</td> <td>CCC</td> </tr> <tr class="odd"> <td>BBB</td> <td>DDD</td> </tr> <tr class="even"> <td> <table id="table2"> <tbody> <tr class="even"></tr> <tr class="odd"></tr> </tbody> <table> </td> </tr> <tbody> </table>。

{{1}}

http://jsfiddle.net/5ETAD/1/

Answer 2

应该是：

$("#table1>tr:odd").addClass("odd");
$("#table1>tr:not(.odd)").addClass("even");

Answer 3

您可以使用以下内容（注意大于号）：

       $(document).ready(function(){
            $("#table1 > tr:odd").addClass("odd");
            $("#table1 > tr:not(.odd)").addClass("even");  
        });

这将只选择直接的儿童tr。

Answer 4

为避免多余的DOM遍历，您可以使用以下内容：

$('#table1 > tbody')
.filter('tr:odd').addClass('odd')
.end() //break chain and return to the original tbody element
.filter('tr:even').addClass('even')

Answer 5

使用direct child选择器。

你也可以使用：甚至代替：not（.odd）

$(document).ready(function(){                 
  $("#table1 > tr:odd").addClass("odd");                 
  $("#table1 > tr:even").addClass("even");               
});

Answer 6

            $("#table1 > tr:odd").addClass("odd");
            $("#table1 > tr:not(.odd)").addClass("even");

Answer 7

您只需要使用正确的CSS选择器。尝试：

$("#table1>tr:odd").addClass("odd");

表中偶数/奇数行的jQuery选择器

7 个答案: