意外行为:甚至是jquery中的伪选择器

Question

我已经创建了这个问题的小提琴,因为你会看到有三个表使用jQuery斑马条.

表1以正确的形式显示,因为它从0开始作为偶数的索引.表2从最后一张表继续,它显示第一行为白色而不是黑色.我认为它正在发生,因为它从最后一个表的tr索引继续.

HTML:

<table>
    <caption> Table 1</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

<table>
    <caption> Table 2</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>

<table>
    <caption> Table 3</caption>
    <tr>
        <th>Table Head 1</th>
        <td>Table Data 1</td>
    </tr>
    <tr>
        <th>Table Head 2</th>
        <td>Table Data 2</td>
    </tr>
    <tr>
        <th>Table Head 3</th>
        <td>Table Data 3</td>
    </tr>
</table>?

JavaScript的:

$('table').find('tr:even').css('background','#d0d0d0');

小提琴:http://jsfiddle.net/daljir/gryh5/

Answer 1

您可以分别使用find()每个表"工作":

$("table").find("tr:even").css("background", "#d0d0d0");

演示: http ://jsfiddle.net/gryh5/1/