jQuery, .each function question

Question

I have following jQuery .each loop:

$('.table-data tbody tr td').each( function(index) {

    $('.table-data tbody tr td' + ':nth-child(' + index + ')' ).addClass( 'nth-' + index );


});

The problem is that it will work, but the last element of the .table-data tbody tr td' will not get a class. Why?

Is this because index is 0 based? How to make it loop for index + 1 time?

$(this) is equal to $('.table-data tbody tr td' + ':nth-child(' + index + ')' ) — Pramendra Gupta
– Pramendra Gupta, Commented Sep 9, 2011 at 10:10
@JapanPro - yes, it took me a second to work that out - for loop. — Iladarsda
– Iladarsda, Commented Sep 9, 2011 at 10:12

centralscru · Accepted Answer · 2011-09-09 11:00:01Z

2

You don't need to drill down to the current element using the index, it's easier than that!

$(".table-data tbody td").each(function(index){
    $(this).addClass("nth-" + index);
});

To renumber the TD elements within each row, try this.

$(".table-data tbody tr").each(function(index){
    $(this).find("td").each(function(index){
        $(this).addClass("nth-" + index);
    });
});

OR, if you want to be a bit cleverer, this...

$(".table-data tbody td").each(function(){
    $(this).addClass("n-" + $(this).index());
});

See this in action: http://jsbin.com/usaqix

edited Sep 9, 2011 at 11:00

answered Sep 9, 2011 at 10:07

centralscru

6,7003 gold badges35 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Iladarsda Over a year ago

$(this).addClass("nth-" + ++index ); will be perfect in my example! Very clever! thanks!

Iladarsda Over a year ago

How to make it count from 0 in every row? Do I have to put this in double .each?

Iladarsda Over a year ago

double .each look like the easy way - but not most pro programic. Thanks for your help!

centralscru Over a year ago

Inside the "each" $(this) represents the current element. The .index() method returns the position of an element relative to its siblings - in the case of the jsbin example a set of three TD elements inside a TR (see api.jquery.com/index).

Timbo · Accepted Answer · 2011-09-09 10:05:45Z

0

The nth child starts on 1, so yes, your zero based index won't work correctly on it. You'll need to do index+1 where you use the index variable - but it will iterate the right number of times.

answered Sep 9, 2011 at 10:05

Timbo

4,5532 gold badges29 silver badges29 bronze badges

Collectives™ on Stack Overflow

jQuery, .each function question

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related