jQuery: How to find and change multiply th classes between n & n

Question

Hi everyone. I have some table structure:

    <tr class="row-2"><tr>
    <tr class="row-3">..<tr>
    <tr class="row-4">..<tr>
    <tr class="row-5">..<tr>
    <tr class="row-6">..<tr>
    <tr class="row-7"><tr>
    <tr class="row-8">..<tr>
    <tr class="row-9">..<tr>
    <tr class="row-10">..<tr>
    <tr class="row-11">..<tr>
...etc

for this example TR with classes "row-2" and "row-7" is parrent product link wich expand child rows.

<script>
$(function() {
    $('tr.parent')
        .css("cursor","pointer")
        .css("color","red")
        .attr("title","Click to expand/collapse")
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle();
        });
    $('tr[@class^=child-]').hide().children('td');
});
</script>

Rows -3...-6 is child of row-2 and Rows -8...-11 is child of row-7

How i can find row-2, row-7, etc then add second class "parrent" and ID similar class (id="row-2", id="row-7", etc)? Also i need add in each TR between row-2 and row-7 class equal previous parrent row. In bottom line i need something like this:

        <tr class="row-2 parrent" id="row-2"><tr>
        <tr class="row-3 child-row2">..<tr>
        <tr class="row-4 child-row2">..<tr>
        <tr class="row-5 child-row2">..<tr>
        <tr class="row-6 child-row2">..<tr>
        <tr class="row-7 parrent" id="row-7"><tr>
        <tr class="row-8 child-row7">..<tr>
        <tr class="row-9 child-row7">..<tr>
        <tr class="row-10 child-row7">..<tr>
        <tr class="row-11 child-row7">..<tr>
..etc

Thanks for any Help.

Answer 1

One way is to do a two-pass on all rows, to set up the required classes and id's. In the first pass, add an id same as the class name, and also add the parent class to row-2, and row-7. In the second pass, find each .parent row, and add child-<id> class to their siblings until the next parent. Instead of hard-coding the values for row-2 and row-7, this assumes that all header items are contained inside a <th> element, instead of a <td> element.

Here's some code: http://jsfiddle.net/vYTW2/

/**
 * Do a two pass on all rows to set them up.
 * In the first pass, add the same id as class, and
 * add the "parent" class to the row.
 *
 * Assuming all product header rows contain a
 * <th> element
 */
$('table tr th').each(function() {
    var row = $(this).parent('tr');
    var id = row.attr('class');
    row.attr('id', id);
    row.addClass('parent');
});

/**
 * In the second pass, run through all header rows
 * (that have the class parent) and mark all next siblings
 * with class "child-rowX" until we see the next parent row.
 */
$('tr.parent').each(function() {
    var id = $(this).attr('id');
    var className = 'child-' + id;
    $(this).nextUntil('.parent').addClass(className);
});