Klasse zum ersten und letzten Element in jquery hinzufügen

Question

Ich möchte eine Klasse zum ersten und letzten ".sub" zwischen den beiden Klassen ".heading" mit jQuery hinzufügen.

<table> 
     <tr class="heading"></tr> 
     <tr class="sub top-box"></tr> 
     <tr class="sub"></tr> 
     <tr class="sub bottom-box"></tr> 
     <tr class="heading"></tr> 
     <tr class="sub top-box"></tr> 
     <tr class="sub"></tr> 
     <tr class="sub"></tr> 
     <tr class="sub"></tr> 
     <tr class="sub bottom-box"></tr> 
    </table> 

Ich versuche dies, aber das ist nicht funktionieren:

jQuery('.heading').click(function(e) { 
     e.preventDefault(); 

     jQuery('.sub:first').nextUntil('.heading').toggleClass('top-box'); 
     jQuery('.sub:last').nextUntil('.heading').toggleClass('bottom-box'); 
    }); 

Answer 1

Wenn ich richtig verstehe Sie das nächste Element mit Klasse willst sub nach dem ersten .heading Elemente, und die .sub direkt vor dem letzten .heading Artikel?

jQuery('.heading').click(function(e) { 
 
    e.preventDefault(); 
 
    jQuery(".heading").first().next(".sub").toggleClass("top-box"); 
 
    jQuery(".heading").last().prev(".sub").toggleClass("bottom-box"); 
 
});

.top-box {background: red;} 
 
.bottom-box {background: blue;} 
 
.heading {cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="heading"><td>HEADING</td></tr> 
 
    <tr class="sub top-box"><td>sub</td></tr> 
 
    <tr class="sub"><td>sub</td></tr> 
 
    <tr class="sub bottom-box"><td>sub</td></tr> 
 
    <tr class="heading"><td>HEADING</td></tr> 
 
    <tr class="sub top-box"><td>sub</td></tr> 
 
    <tr class="sub"><td>sub</td></tr> 
 
    <tr class="sub"><td>sub</td></tr> 
 
    <tr class="sub"><td>sub</td></tr> 
 
    <tr class="sub bottom-box"><td>sub</td></tr> 
 
</table>

Answer 2

Sie können dies mit der Wahl :first/:last zusammen mit prev()/next() Methoden.

$('.heading:first').next('.sub').addClass("top-box") 
 
$('.heading:last').prev('.sub').addClass("bottom-box")

.top-box{ 
 
    background-color:yellow 
 
} 
 
.bottom-box{ 
 
    background-color:green 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr class="heading"><td>heading</td></tr> 
 
    <tr class="sub "><td>sub1</td></tr> 
 
    <tr class="sub"><td>sub</td></tr> 
 
    <tr class="sub "><td>sub</td></tr> 
 
    <tr class="heading"><td>heading</td></tr> 
 
    <tr class="sub"><td>sub2</td></tr> 
 
    <tr class="sub"><td>sub</td></tr> 
 
    <tr class="sub"><td>sub</td></tr> 
 
    <tr class="sub"><td>sub</td></tr> 
 
    <tr class="sub"><td>sub</td></tr> 
 
</table>

Answer 3

Try this ... seine möglichen es mehr Phantasie zu machen: (‘. Sub '). D

jQuery('.heading').click(function(e) { 
     e.preventDefault(); 
     var i = 0; 
     $('.heading').each(function(){ 
      if(i % 2 = 0){ 
      jQuery(this).next(".sub").toggleClass("top-box"); 
      }else{ 
      jQuery(this).prev(".sub").toggleClass("bottom-box"); 
      } 
      i++; 
     }); 
    });