Comment trouver des lignes entre les autres lignes w/ID puis ajouter la classe

Question

Je suis coincé avec ma table. J'ai besoin de créer des fonctions de bascule, mais je n'ai aucune idée de comment trouver des sous-lignes dans la table. Est-ce que quelqu'un peut m'aider?

1. Je table avec plusieurs lignes> 500
2. Toutes les lignes ont class = "rangée 1, rangée 2 ..... rangée 600 etc"
3. Et toutes les lignes principales ont aussi classe = « parent »

entre chaque lignes « parent » J'ai 6 lignes, donc j'ai besoin à des fins bascule/effondrement trouver toutes les lignes (sous) entre les rangées de parents. et ajoutez la classe avec l'id comme dans la rangée précédente de parent.

Par exemple:
parent ont class = "ligne-1 parent"
tous les sous doit avoir - class = "enfant-ligne-1"

table par défaut

<table id="table"> 
    <tr class="row-1 odd parent"> 
     <th class="column-1">st. 3 - 5</th> 
     <th class="column-2">Profile</th> 
     <th class="column-3">Purpose</th> 
    </tr> 
    <tr class="row-2 even"> 
     <td class="column-1">Metal Stamp</td> 
     <td class="column-2">Width</td> 
     <td class="column-3">Price</td> 
    </tr> 
    <tr class="row-3 odd"> 
     <td class="column-1">Circle 3 - 5</td> 
     <td class="column-2">28-110</td> 
     <td class="column-3">21500</td> 
    </tr> 
    <tr class="row-4 even"> 
     <td class="column-1">Circle 3 - 5</td> 
     <td class="column-2">115-180</td> 
     <td class="column-3">20700</td> 
    </tr> 
    <tr class="row-5 odd"> 
     <td class="column-1">Cube 3 - 5</td> 
     <td class="column-2">63-80</td> 
     <td class="column-3">21500</td> 
    </tr> 
    <tr class="row-6 even"> 
     <td class="column-1">Cube 3 - 5</td> 
     <td class="column-2">100-220</td> 
     <td class="column-3">20700</td> 
    </tr> 
    <tr class="row-7 odd"> 
     <td class="column-1">Line 3 - 5</td> 
     <td class="column-2">10-50 х 40-200</td> 
     <td class="column-3">27000</td> 
    </tr> 
</table> 

à la fin, il devrait ressembler à ceci:

<table id="table"> 
    <tr class="row-1 odd parent"> 
     <th class="column-1">st. 3 - 5</th> 
     <th class="column-2">Profile</th> 
     <th class="column-3">Purpose</th> 
    </tr> 
    <tr class="row-2 even child-row-1"> 
     <td class="column-1">Metal Stamp</td> 
     <td class="column-2">Width</td> 
     <td class="column-3">Price</td> 
    </tr> 
    <tr class="row-3 odd child-row-1"> 
     <td class="column-1">Circle 3 - 5</td> 
     <td class="column-2">28-110</td> 
     <td class="column-3">21500</td> 
    </tr> 
    <tr class="row-4 even child-row-1"> 
     <td class="column-1">Circle 3 - 5</td> 
     <td class="column-2">115-180</td> 
     <td class="column-3">20700</td> 
    </tr> 
    <tr class="row-5 odd child-row-1"> 
     <td class="column-1">Cube 3 - 5</td> 
     <td class="column-2">63-80</td> 
     <td class="column-3">21500</td> 
    </tr> 
    <tr class="row-6 even child-row-1"> 
     <td class="column-1">Cube 3 - 5</td> 
     <td class="column-2">100-220</td> 
     <td class="column-3">20700</td> 
    </tr> 
    <tr class="row-7 odd child-row-1"> 
     <td class="column-1">Line 3 - 5</td> 
     <td class="column-2">10-50 х 40-200</td> 
     <td class="column-3">27000</td> 
    </tr> 
</table> 

Answer 1

Il y a un nextUntil méthode dans jQuery pour traverser l'arbre. En fait, il existe un tas de méthodes que vous pourriez utiliser pour parcourir l'arbre et vous pouvez en apprendre plus à leur sujet here.

Pour ce faire, pour toutes les lignes:

1. sélectionnez chaque ligne parent $('.parent').each(..)
2. trouver le nom de la classe (row-nn)
3. Ajouter une classe à (child-row-nn) lignes suivantes jusqu'à ce que la prochaine .parent.

Update on jsf.

$(".parent").each(function() { 
    var classes = $(this).attr('class').split(' '); 
    var matches = $.grep(classes, function(item, index) { 
     return /row-/.test(item); 
    }); 
    if(matches.length == 1) { 
     var parent = matches[0]; 
     var selector = '.' + parent; 
     var childClass = 'child-' + parent; 
     $(selector).nextUntil('.parent').addClass(childClass); 
    } 
});