CODEWITHSUNDEEP
jquery
Jandon
Jandon

Reputation: 625

add class to first and last element in jquery

I would like to add a class to the first and last '.sub' between the two '.heading' class with jQuery.

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

I try this, but that's don't work :

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

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

Upvotes: 1

Views: 2297

Answers (3)

Bram Vanroy
Bram Vanroy

Reputation: 28437

If I understand correctly you want the next item with class sub after the first .heading item, and the .sub right before the last .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>

Upvotes: 1

Janick Fischer
Janick Fischer

Reputation: 636

Try this... its possible to make it more fancy :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++;
        });
    });

Upvotes: 1

Jamiec
Jamiec

Reputation: 136104

You can do this with the :first/:last selector along with prev()/next() methods.

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

Upvotes: 1

Related Questions