jQuery查找類，值並更改背景色

Question

所以我有這段代碼

<div class="width100">
    <div class="width16 aux"><h1>ABC</br>A1</h1><p class="aux-status">50</p></div>
    <div class="width16 aux"><h1>ABC</br>B2</h1><p class="aux-status">24</p></div>
    <div class="width16 aux"><h1>ABC</br>C3</h1><p class="aux-status">24</p></div>
    <div class="width16 aux"><h1>DEF</br>1A</h1><p class="aux-status">24</p></div>
    <div class="width16 aux "><h1>ABC</br>D4</h1><p class="aux-status">0</p></div>

    <div class="width32 aux coomms">have: 12213</div>


    <div class="width16 aux clear"><h1>ABC</br>E5</h1><p class="aux-status">24</p></div>
    <div class="width16 aux"><h1>ABC</br>F6</h1><p class="aux-status">0</p></div>
</div>

現在，我需要遍歷所有帶有“ aux-status”類的段落並檢查值。 如果值小於10，則需要將背景更改為綠色，將10和20之間的顏色更改為橙​​色，將20以上的顏色更改為紅色。

任何想法如何做到這一點？

Answer 1

$('.aux-status').each(function(index,value){

  var value1 = parseInt($(this).text(),10);

      if(value1  <10)
       $(this).css('background-color','green');
      else if(value1  > = 10 && value <=20)
       $(this).css('background-color','orange');
      else 
       $(this).css('background-color','red'); 

});

http://jsfiddle.net/FLsVT/2/

Answer 2

你可以得到的文本

如下：

$(document).ready(function(){
  $('.aux-status').each(function(){
  var value = parseInt($(this).text(),10);
  if(value  <10)
   $(this).css('background-color','black');
  else if(value  > = 10 )
   $(this).css('background-color','red');
  });
});

希望這對你有用

Answer 3

用這個...

$('.aux-status').each(function(){
    var value = parseInt($(this).text());
    if(value < 10){
         $(this).css('background-color', 'green');   
    }else if(value > 20){
        $(this).css('background-color', 'red');   
    }else{
        $(this).css('background-color', 'orange');   
    }
});

看到這個演示

Answer 4

.css方法接受一個函數作為第二個參數，因此您可以執行以下操作：

$('.aux-status').css('background-color', function() {
    var value = parseInt($(this).text(), 10);
    if (value < 10) {
       return 'green';    
    } else if (value >= 10 && value <=20 ) {
       return 'orange';
    } else {
       return 'red';
    }
 });

小提琴演示。

Answer 5

$('.width100 .aux-status').each(function(){
    var myval = $(this).text();
    if(myval < 10){
        $(this).prev().css('background-color','green');
    }
    if(myval => 10 && myval < 21){
        $(this).prev().css('background-color','orange');
    }
    if(myval > 20){
        $(this).prev().css('background-color','red');
    }
});