CODEWITHSUNDEEP
jquery
Olivera Kovacevic
Olivera Kovacevic

Reputation: 717

Several tables with same class, only rows in first table affected, why?

I have several tables with the same class, and each has 2 rows. I want to give the td elements in each table in the second row a certain class, but the way I do it only does it for the first table, and I don't know why.

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

Only the td elements in the second row in the FIRST table get the class, other tables do not.

<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>

Upvotes: 1

Views: 248

Answers (3)

Kamil
Kamil

Reputation: 39

Maybe like this: (change "#" for this "." - ofcourse add class to table and remove id)

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

Upvotes: -1

iappwebdev
iappwebdev

Reputation: 5910

As documentation at http://api.jquery.com/eq/ says: Description: Reduce the set of matched elements to the one at the specified index. So after :eq(1) you only have one elements.

To solve your problem use :nth-child() (http://api.jquery.com/nth-child-selector/):

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

Upvotes: 1

Adil
Adil

Reputation: 148160

Try using :last-child instead of eq

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

Upvotes: 1

Related Questions