CODEWITHSUNDEEP
jqueryfindjquery-selectors
hocpana
hocpana

Reputation: 11

Find next div of similar class. Not all sibling classes

<div class="tab-pane active"></div>
<div class="tab-pane"></div>
<div class="tab-pane"></div>
<div class="tab-pane"></div>
<button id="action">Next Div</button>

I want to add "active" class into next tab-pane div by clicking #action button. i.e. when I first click on #action button then my dom looks like -

<div class="tab-pane active"></div>
<div class="tab-pane active"></div>
<div class="tab-pane"></div>

and when I click the second time on #action button the dom looks -

<div class="tab-pane active"></div>
<div class="tab-pane active"></div>
<div class="tab-pane active"></div>
<div class="tab-pane"></div>

How can I do that in jQuery?

Upvotes: 1

Views: 196

Answers (1)

emmanuel
emmanuel

Reputation: 9615

This should help:

$('#action').click(function() {
  $('.tab-pane.active').next('div').addClass('active');
});
div {
  display: inline-block;
  width: 40px;
  height: 40px;
}
.active {
  background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="tab-pane active"></div>
<div class="tab-pane"></div>
<div class="tab-pane"></div>
<div class="tab-pane"></div>
<button id="action">Next Div</button>

Upvotes: 1

Related Questions