CODEWITHSUNDEEP
javascriptjquery
stact overflowsam1
stact overflowsam1

Reputation: 77

.each() to toggle class not working

I have a JavaScript .each() function which check the value of my div tag and toggle a css class. I am just checking the value fetched from my db and giving the a particular color. 

$(".c").each(function() {
     if ($(this).text() < 4) {
           $(".col").toggleClass("yellow");
     } else if ($(this).text() >= 4 && $(this).text() <=6) {
           $(".col").toggleClass("orange");
     } else if ($(this).text() >= 6 && $(this).text() <=10) {
           $(".col").toggleClass("red");
     }
});

The problem is when I ran the code only the last else if which is the toggleClass("red') runs. And I am only getting one color which in this case is red displayed,don't know why.

My HTML is looped in a php foreach loop:

 <div class="col">
       <h4 class="c">'.$marks.'</h4>
       <h6>Marks</h6>
 </div> 
 <div class="col">
       <h4 class="c">'.$highest.'</h4>
       <h6>Highest</h6>
 </div>

enter image description here

Like thhe above image I was looking to put my text and number in a same color

Upvotes: 0

Views: 284

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65796

Your code sets the class on all the .col elements. to isolate just the one you are matching, you need to use .closest() to look for the closest ancestor that matches your criteria.

$(".c").each(function() {
  if($(this).text() < 4){
    $(this).closest($(".col")).toggleClass("yellow");
  } else if ($(this).text() >= 4 && $(this).text() <=6){
    $(this).closest($(".col")).toggleClass("orange");
  } else if ($(this).text() >= 6 && $(this).text() <=10){
    $(this).closest($(".col")).toggleClass("red");
  }
});
.col { width: 5em; text-align:center; padding:1em; margin:5px; float:left; }
.yellow { background-color:yellow; }
.orange { background-color:orange; }
.red { background-color:red; }
h4, h6 { margin:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
       <h4 class="c">4</h4>
       <h6>Marks</h6>
 </div> 
 <div class="col">
       <h4 class="c">7</h4>
       <h6>Highest</h6>
 </div>
 <div class="col">
       <h4 class="c">2</h4>
       <h6>Highest</h6>
 </div>

Upvotes: 1

Atanu Biswas
Atanu Biswas

Reputation: 26

Try the below script:

$("div.col h4.c").each(function() {
     if($(this).text() < 4){
           $("div.col").toggleClass("yellow");
}
     else if ($(this).text() >= 4 && $(this).text() <=6){
           $("div.col").toggleClass("orange");
}
     else if ($(this).text() >= 6 && $(this).text() <=10){
           $("div.col").toggleClass("red");
}

});

Upvotes: -2

Nelson Teixeira
Nelson Teixeira

Reputation: 6572

You are setting all .col elements. Change to this:

$(".c").each(function() {
     if($(this).text() < 4){
           $(this).parent().toggleClass("blue");
     } else if ($(this).text() >= 4 && $(this).text() <=6) {
           $(this).parent().toggleClass("orange");
     } else if ($(this).text() >= 6 && $(this).text() <=10) {
           $(this).parent().toggleClass("red");
     }
});
.red {
    color: red;
}
  
.blue {
    color: blue;
}
  
.orange {
    color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
       <h4 class="c">2</h4>
       <h6>Marks</h6>
 </div> 
 <div class="col">
       <h4 class="c">5</h4>
       <h6>Highest</h6>
 </div>

I used blue color so to make the difference more visible.

Upvotes: 1

Related Questions