几个具有相同类的表,只有第一个表中的行受到影响,为什么?



我有几个具有相同类的表,每个表有2行。我想给第二行每个表中的td个元素一个特定的类,但是我这样做的方式只对第一个表起作用,我不知道为什么。

$('#main table.asseenin_table tr:eq(1) td').addClass('asi_second');

只有第一个表中第二行的td元素获得类,其他表没有。

<table class="asseenin_table">
                <tr>
                    <td><a href="#"><img src="images/asseenin/1.jpg" /></a></td>
                    <td><a href="#"><img src="images/asseenin/2.jpg" /></a></td>
                    <td><a href="#"><img src="images/asseenin/3.jpg" /></a></td>
                    <td><a href="#"><img src="images/asseenin/4.jpg" /></a></td>
                    <td><a href="#"><img src="images/asseenin/5.jpg" /></a></td>
                </tr>
                <tr>
                    <td>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    </td>
                    <td>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    </td>
                    <td>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    </td>
                    <td>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    </td>
                    <td>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    </td>
                </tr>
            </table>
            <table class="asseenin_table">
                <tr>
                    <td><a href="#"><img src="images/asseenin/6.jpg" /></a></td>
                    <td><a href="#"><img src="images/asseenin/7.jpg" /></a></td>
                    <td><a href="#"><img src="images/asseenin/8.jpg" /></a></td>
                    <td><a href="#"><img src="images/asseenin/9.jpg" /></a></td>
                    <td><a href="#"><img src="images/asseenin/10.jpg" /></a></td>
                </tr>
                <tr>
                    <td>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    </td>
                    <td>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    </td>
                    <td>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    </td>
                    <td>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    </td>
                    <td>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    <a href="#"><img src="images/asseenin/thumbs/thumb.jpg" /></a>
                    </td>
                </tr>
            </table>

尝试使用:last-child代替eq

$('#main table.asseenin_table tr:first-child td').addClass('asi_second');

正如http://api.jquery.com/eq/上的文档所说:Description: Reduce the set of matched elements to the one at the specified index.所以在:eq(1)之后你只有一个元素。

使用:nth-child() (http://api.jquery.com/nth-child-selector/):

$('#main table.asseenin_table tr:nth-child(1) td').addClass('asi_second');

可以这样:(将"#"改为"。")-当然添加类到表中,并删除id)

$('.main table.asseenin_table tr:eq(1) td').addClass('asi_second');

最新更新