How to add class dynamic using jquery

Question

See code below:

$(".btn").on("click", function(){
    $(".main-div").toggleClass("active");
});

.main-div.active {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
  <div class="btn">ClickMe1</div>

<div class="main-div">Div1</div>
</div>

<div class="one">
  <div class="btn">ClickMe2</div>

<div class="main-div">Div2</div>
</div>

Hi guys, can you help me with this matter? Well my goal is to when I click the first button it should only add class on the first .main-div however, by using toggle it adds also on the second div. Can anyone help me how to implement it correctly?

Dave L · Accepted Answer · 2021-10-25 03:38:07Z

1

$(".btn").on("click", function(){
    $(this).next(".main-div").toggleClass("active");
});

.main-div.active {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
  <div class="btn">ClickMe1</div>

<div class="main-div">Div1</div>
</div>

<div class="one">
  <div class="btn">ClickMe2</div>

<div class="main-div">Div2</div>
</div>

Your problem is the $(".main-div").toggleClass("active"); selects every .main-div, not just the sibling element.

The easiest way to select the next sibling with the .main-div class is $(this).next(".main-div").toggleClass("active");

You can read more about jQuery selectors at https://api.jquery.com/category/selectors/

answered Oct 25, 2021 at 3:38

Dave L

9844 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CoreTM Over a year ago

thanks for this idea I'll look into it now :)

CoreTM Over a year ago

hi thanks for this idea however using .next is only working if you have 2 div's on your .main-div. What if you have many? Thanks

Dave L Over a year ago

It should work for as many blocks with.main-div as you want, assuming you keep that same structure with a single .main-div per parent .one div. If you want to use multiple .main-div in the same parent then you can use $(this).parent().children(".main-div").toggleClass("active");, however it will highlight all the .main-div in that parent

Collectives™ on Stack Overflow

How to add class dynamic using jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related