2

This is usually a very straight forward thing to do, so before you down vote me for such a question hear me out :)

My problem is not selecting the elements and adding the class, it's that I want the alternate class to be added to even or odd rows relative to that table.

Right now I am using this:

jQuery(document).ready(function(){

jQuery('table.rep tbody > tr td:first-child').addClass('composer');
jQuery('table.rep tbody > tr td:last-child').addClass('pieces');
jQuery('table.rep tbody > tr:odd').addClass('alt');

});

The problem is that jQuery is selecting all of the rows from all of the tables with the "rep" class and then adding the "alt" class to the odd rows from that set.

Like I said, I want to have it apply the class to the even/odd rows relative to each table, so the first row would always be styled the same way. As it is using the code above, the first rows can be either alt/normal based on how many rows are in the previous table.

I was thinking of somehow using the .each() function, but after looking through the jQuery docs, I haven't been able to find out how to achieve my desired result.

I'm thinking it might look something like this:

jQuery('table.rep').each(function(){
    /* select/filter odd rows from this set and add alt class */
});

So my question is if .each() can be used like that and if so, how to drill down into the results of each iteration and make it do what I want.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Evan Mattson
  • 167
  • 1
  • 11

2 Answers2

2

Here you are with .each() :)

jQuery("table.rep").each(function(i,e)
            {
                $(e).find("tr:odd").addClass("alt");
            });
Cranio
  • 9,647
  • 4
  • 35
  • 55
0

Here you go..! Always remember that $(...).length is key to find out how may elements are in your filter or trap... :-)

Javascript:

jQuery(document).ready(function()
{
    $('table.rep tbody > tr td:first-child').addClass('composer');
    $('table.rep tbody > tr td:last-child').addClass('pieces');
    $('table.rep').each(function()
    {
       //alert($(this).children('tbody').children(':odd').length)
       $(this).children('tbody').children(':odd').addClass('alt');
    });

});

HTML

<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>
        <tr>
            <td>composor #2.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.2</td>
        </tr>
    </tbody>
</table>
<br /><br />
<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>

    </tbody>
</table>
<br /><br />
<table border="1" class="rep">
    <tbody>
        <tr>
            <td>composor #1.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.1</td>
        </tr>
        <tr>
            <td>composor #1.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #1.2</td>
        </tr>
        <tr>
            <td>composor #2.1</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.1</td>
        </tr>
        <tr>
            <td>composor #2.2</td>
            <td>data</td>
            <td>data</td>
            <td>pieces #2.2</td>
        </tr>
    </tbody>
</table>

CSS

.composer {
    color:blue;
}
.pieces {
    color:green;
}
.alt {
    background-color:#ddd;
}
body {
    font-family:tahoma
}
.rep td {
    padding:2px;
}

I could have avoided adding HTML but than in order to make this post (answer) self-contained - I am adding it here.

You can view demo here on jsfiddle: http://jsfiddle.net/dharmavir/HfwqH/

deej
  • 2,536
  • 4
  • 29
  • 51
  • While answer from @Cranio is using find method I could not stop myself from checking what's better "children" or "find" and I am glad I did search that. Find is faster in generally normal cases unless the depth is too much. Everyone reading this will find another post interesting which talks about same: http://stackoverflow.com/questions/648004/what-is-fastest-children-or-find-in-jquery – deej Jun 18 '12 at 18:07
  • Thanks for both answers! I accepted this one because the author took the time to offer variations on the solution that affect the performance of the script. I looked into it myself and I think in my situation using `.children` is the better solution, but both methods definitely work. Thanks! – Evan Mattson Jun 18 '12 at 20:08