Jquery 如何防止在嵌套表中添加偶数/奇数类 $（函数（）{ $（“tr:偶数”）.addClass（“偶数”）； $（“tr:odd”）.addClass（“odd”）； }) A. A-1 A-2 B

运行上述代码后，偶数/奇数类已添加到嵌套表中，如：

 $(function(){

                $("tr:even").addClass("even");
                $("tr:odd").addClass("odd");


            }) 


     <table>
        <tr>
            <td>A</td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr><td>A-1</td></tr>
                    <tr><td>A-2</td></tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>B</td>
        </tr>
    </table>

A.
A-1
A-2
B

我应该做什么更改以使偶数/奇数类不在嵌套表中，输出如下：

<table>
    <tr class="even">
        <td>A</td>
    </tr>
    <tr class="odd">
        <td>
            <table>
                <tr class="even"><td>A-1</td></tr>
                <tr class="odd"><td>A-2</td></tr>
            </table>
        </td>
    </tr>
    <tr class="even">
        <td>B</td>
    </tr>
</table>

A.
A-1
A-2
B

为您的外部表格提供一个

id

，然后使用：

---

子选择器仅选择直接子元素，而不是所有子元素（当前选择器仅选择DOM中的所有

td

元素，而不管它们位于哪个表中）。

如果您可以控制HTML，则可以将类添加到要排除的行中，然后在jQuery选择器的“not”选择器中指定该类-

jQuery

$("#yourTable > tbody > tr:even").addClass("even");
$("#yourTable > tbody > tr:odd").addClass("odd");

HTML

$("tr:not(.inner):even").addClass("even");
$("tr:not(.inner):odd").addClass("odd");

A.
A-1
A-2
B

这将不对包含嵌套表的“tr”应用任何样式，因此奇数样式将应用于“A”，偶数样式将应用于“B”

---

工作演示-

请记住，许多（如果不是全部的话）浏览器会将

tbody

元素添加到

表中，以包含
tr
元素。
$("tr:not(.inner):even").addClass("even");
$("tr:not(.inner):odd").addClass("odd");

<table>
        <tr>
            <td>A</td>
        </tr>
        <tr class="inner">
            <td>
                <table >
                    <tr class="inner"><td>A-1</td></tr>
                    <tr class="inner"><td>A-2</td></tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>B</td>
        </tr>
    </table>