JQuery toggle and remove css classes in multiple divs

Question

I have the following HTML :

<div class="wrap">
div class="red" id="ch1">Content</div>
...
<div class="green" id="ch..">Content</div>
<div class="red" id="ch..">Content</div>
</div>

<div class="wrap">
div class="green" id="ch11">Content</div>
<div class="red" id="ch12">Content</div>
...
<div class="green" id="ch..">Content</div>
</div>

and I am using the following script to change class on divs:

$(".red , .green").click(function(){
    $(".green").not($(this)).removeClass("green").addClass("red");
     $(this).toggleClass('red green');
});

I would like to have or all "red" or just ONE "green" div in EACH "wrap" without cancelling (convert to red) all Divs to all "wraps"

Arun P Johny · Accepted Answer · 2015-08-18 04:00:26Z

You need to target only the sibling elements while adding/removing class, not all green element

$('.red, .green').on('click', function() {
  $(this).siblings(".green").removeClass("green").addClass("red");
  $(this).toggleClass('red green');
});

.red {
  color: red
}
.green {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
  <div class="red" id="ch1">Content</div>
  <div class="green" id="ch..">Content</div>
  <div class="red" id="ch..">Content</div>
</div>

<div class="wrap">
  <div class="green" id="ch11">Content</div>
  <div class="red" id="ch12">Content</div>

  <div class="red" id="ch..">Content</div>
</div>

Or use event delegation model

$('.wrap').on('click', '.red, .green', function() {
  $(this).siblings(".green").removeClass("green").addClass("red");
  $(this).toggleClass('red green');
});

.red {
  color: red
}
.green {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
  <div class="red" id="ch1">Content</div>
  <div class="green" id="ch..">Content</div>
  <div class="red" id="ch..">Content</div>
</div>

<div class="wrap">
  <div class="green" id="ch11">Content</div>
  <div class="red" id="ch12">Content</div>

  <div class="red" id="ch..">Content</div>
</div>

guest271314 · Accepted Answer · 2015-08-18 04:50:29Z

Try utilizing if... else statement ; if clicked element has class .red , toggle .green to .red inside of parent .wrap , then toggle class from .green to .red . If clicked element has class .green toggle class from .red to .green

$(".red , .green").click(function(e) {
  if ($(this).is(".red")) {
   $(this).parent(".wrap").find(".green").toggleClass("red green")
   .end().find(this).toggleClass("green red");
  } else {
    $(this).toggleClass("red green")
  }
});

.red {
  background-color: #CC0000;
}
.green {
  background-color: #009900;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
  <div class="red" id="ch1">Content</div>
  <div class="green" id="ch..">Content</div>
  <div class="red" id="ch..">Content</div>
</div>
...
<div class="wrap">
  <div class="green" id="ch11">Content</div>
  <div class="red" id="ch12">Content</div>
  <div class="green" id="ch..">Content</div>
</div>

duellsy · Accepted Answer · 2015-08-18 04:55:24Z

0

$('.red, .green').on('click', function() { 
  $(".green").prop("class", "red");
  $(".red").prop("class", "green");
}

edited Aug 18, 2015 at 4:55

duellsy

8,6432 gold badges38 silver badges61 bronze badges

answered Aug 18, 2015 at 4:12

Deepesh kumar Gupta

8962 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

JQuery toggle and remove css classes in multiple divs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related