Question

The following code is just a demonstration for the theory that I want to apply to my app so using THIS instead of td.flex is not appropriate for the the second line in the function.

Also I MUST Use .index instead of nth-child for other reasons.

That all said 🙂

The following function loops through all the TD’s in the first row of a table that have a class of flex. For each of these record the index value. The next line is not part of the real application but to test the theory should find all the tds with a class of flex that have an index value that matches the cellIndex value. Any ideas how to get this to work?

Remember this code is to test the theory hence why I am not using nth-child or this to apply the css colouring!

cellIndex = new Array();

    $('table tr:first-child td.flex').each(function (i) {

        cellIndex[i] = $(this).index();

        $($('td.flex').index(cellIndex)).css('background-color', '#ff0000');

    });

if I do: console.log($('td.flex').index(cellIndex));

I get -1 for each loop

Just to confirm I know I could do this:

$(this).css('background-color', '#ff0000');

but this IS NOT what I’m trying to achieve with this function and would NOT work in the real application.

HTML example:

<table>
<tr>
<td class="flex">Flex</td>
<td>Not Flex</td>
<td class="flex">Flex</td>
<td>Not Flex</td>
<td>Not Flex</td>
</tr>
</table>

Answer 1

the each function already include an index system. So you can use it like this (cellIndex is obsolete then): http://jsfiddle.net/TMFg3/

cellIndex = new Array();

$('table tr:first-child td.flex').each(function (i) {

    cellIndex[i] = i;

   $('td.flex:eq('+i+')').css('background-color', '#ff0000');

});

If you wan’t to use the cellIndex, then you have to loop it outside the each function, since you can’t post an array to an index identifer, plus it would change the same targets in each loop 🙂

You can ofcourse also use the index in cellIndex like this:

cellIndex = new Array();

$('table tr:first-child td.flex').each(function (i) {

    cellIndex[i] = i;

   $('td.flex:eq('+cellIndex[i]+')').css('background-color', '#ff0000');

});