將類添加到jquery中的第一個和最後一個元素

Question

我想用jQuery在兩個'.heading'類之間的第一個和最後一個'.sub'中添加一個類。

<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> 

我試試這個，但是這不工作：

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

如果我理解正確的話，你要在第一.heading項目後sub類下一個項目，而.sub前右邊的最後一個.heading item？

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

您可以prev()/next()方法隨着:first/:last選擇這樣做。

$('.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

嘗試......它可能使它更看中的：（」子 '）。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++; 
     }); 
    });