How do I select all cells in nth column of a normal html table. Ive tried this but its not working:

    $('table#foo tbody td:nth-child(3)').each(function (index) {
        $(this).addClass('hover');
    });

UPDATE: Heres a jsfiddle of the unworking code: /

How do I select all cells in nth column of a normal html table. Ive tried this but its not working:

    $('table#foo tbody td:nth-child(3)').each(function (index) {
        $(this).addClass('hover');
    });

UPDATE: Heres a jsfiddle of the unworking code: http://jsfiddle/Claudius/D5KMq/

• javascript
• jquery
• jquery-selectors
• css-selectors

• 1 Have you got an example of the markup, in jsfiddle for example? – StuperUser Commented Oct 19, 2011 at 13:18
• works for me ... jsfiddle/cefb7 – Manuel van Rijn Commented Oct 19, 2011 at 13:21
• me too: jsfiddle/alnitak/XWyAn – Alnitak Commented Oct 19, 2011 at 13:24
• Heres a jsfiddle: jsfiddle/Claudius/D5KMq – Muleskinner Commented Oct 19, 2011 at 13:25
• Sorry forgot to include jquery, heres a update that seems to work jsfiddle/Claudius/D5KMq/2 – Muleskinner Commented Oct 19, 2011 at 13:30

3 Answers 3

There is no need to use each for this.

$('table#foo tbody td:nth-child(3)').addClass('hover');

Other than that, there's nothing wrong with your code. Problem must be somewhere else.

Your actual problem (not evident in the original question, but there in the fiddle) is that .index() returns a zero-based value, but :nth-child() requires a one-based value.

$('table#foo tbody td:nth-child(3)').addClass('hover');

Use this script (draw your attention that with :nth-child selector index of each child to match, starting with 1)

$(".legendvalue", ".stmatst_legends").hover(function() {
    var index = $('.legendvalue').index($(this));

    $('table#stmstat tbody td:nth-child(' + (index + 1) + ')').addClass('hover');


}, function() {
    //remove hover
});