CODEWITHSUNDEEP
javascriptjquery
Jandon
Jandon

Reputation: 625

Add class to the next div with specific class jquery

I create a table and when I clicked on "heading" I would like to add "open" class to the next divs who have the class "sub" with jQuery.

My code don't work :

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

        jQuery(this).nextUntil('.heading').addClass('open');
    });
}

Can I have some help please ?

<table>
    <tr class="heading"></tr>
    <tr class="sub"></tr>
    <tr class="sub"></tr>
    <tr class="sub"></tr>
    <tr class="heading"></tr>
    <tr class="sub"></tr>
    <tr class="sub"></tr>
    <tr class="sub"></tr>
</table>

Example :

<table>
    <tr class="heading"></tr>
    <tr class="sub open"></tr>
    <tr class="sub open"></tr>
    <tr class="sub open"></tr>
    <tr class="heading"></tr>
    <tr class="sub"></tr>
    <tr class="sub"></tr>
    <tr class="sub"></tr>
</table>

Upvotes: 1

Views: 1604

Answers (2)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

Since you are clicking on your td inside the heading class, use jQuery(this).parent() to get back to the .heading element

You can also remove the th from the click like jQuery('.heading').click and then you don't need .parent()

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

    jQuery(this).parent().nextUntil('.heading').addClass('open');
  });
}

table_show()
.open {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="heading"><th>heading</th></tr>
  <tr class="sub"><th>sub</th></tr>
  <tr class="sub"><th>sub</th></tr>
  <tr class="sub"><th>sub</th></tr>
  <tr class="heading"><th>heading</th></tr>
  <tr class="sub"><th>sub</th></tr>
  <tr class="sub"><th>sub</th></tr>
  <tr class="sub"><th>sub</th></tr>
</table>

Upvotes: 3

Satpal
Satpal

Reputation: 133403

You need add open to the siblings to TR elements, thus use .closest() to traverse up to it, then perform the desired operation.

jQuery(this).closest('.heading').nextUntil('.heading').addClass('open');


function table_show() {
  jQuery('.heading th').click(function(e) {
    e.preventDefault();
    jQuery(this).closest('.heading').nextUntil('.heading').addClass('open');
  });
}

table_show()
.open {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="heading">
    <th>heading</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="heading">
    <th>heading</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
</table>

OR, Attach event handler with TR

jQuery('.heading').click(function(e) {
    e.preventDefault();
    jQuery(this).nextUntil('.heading').addClass('open');
});


function table_show() {
  jQuery('.heading').click(function(e) {
    e.preventDefault();
    jQuery(this).nextUntil('.heading').addClass('open');
  });
}

table_show()
.open {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="heading">
    <th>heading</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="heading">
    <th>heading</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
  <tr class="sub">
    <th>sub</th>
  </tr>
</table>

Upvotes: 1

Related Questions