Question

I’ve got this problem using jQuery’s .each() function.
I want to sort the rows and columns of a table i have, which i’m trying to do by adding attributes named ‘row’ and ‘col’ to my ‘td’ tags.

basically my code looks like this:

$('tr').each(function(tr_index) {
    $('td').each(function(td_index) {
        $(this).attr({
            'row' : tr_index,
            'col' : td_index,
        });
    });
});

but this gives me the following output:

<td row="6" col="0"></td>
<td row="6" col="1"></td>
<td row="6" col="2"></td>
<td row="6" col="3"></td>
<td row="6" col="4"></td>
<td row="6" col="5"></td>
<td row="6" col="6"></td>

the row attribute outputs 6 on every single ‘td’ tag. does this mean that the first .each() loop is executed before any of the second .each() loop is fired?

any ideas how i could change this so that i have something like this:

<td row="0" col="0"></td>
<td row="0" col="1"></td>
<td row="0" col="2"></td>
<td row="1" col="0"></td>
<td row="1" col="1"></td>
<td row="1" col="2"></td>
<td row="2" col="0"></td>

etc…

i would be grateful if anyone has a solution to this problem for me, since i can’t seem to wrap my head around it.

Answer 1

try this

        $('tr').each(function(idx_row){
            $(this).children().each(function(idx_col){
                $(this).attr({'row':idx_row, 'col':idx_col});
            })
        });