meilleure façon jquery pour trouver et filtrer et appliquer des classes CSS

Question

ok dire que nous avons

<span class="foo">7</span> 
<span class="foo">2</span> 
<span class="foo">9</span> 

et que vous souhaitez appliquer une classe css de « plus haut » à « span.foo'.text> 7 classe et css de milieu à des valeurs> 4 et 7 < = et de classe css de la plus basse à < = 4

exemple de résultat souhaité:

<span class="foo medium">7</span> 
<span class="foo lowest">2</span> 
<span class="foo highest">9</span> 

Est-ce un trouver et filtrer la situation? Je suis sûr que c'est commun, mais je n'arrive pas à trouver le meilleur moyen de l'écrire. Merci

Answer 1

$("span.foo").each(function(){ 
    var num = parseInt(this.innerHTML, 10); 
    if (num > 7) 
    this.className += " highest"; 
    else if (num <= 4) 
    this.className += " lowest"; 
    else 
    this.className += " medium"; 
}); 

Answer 2

Vous pouvez le faire avec find/filter. Il serait plus facile de le faire avec each:

$('span.foo').each(function(){ 
    var $this = $(this), 
     val = parseInt($this.html(),10); 

    if (val > 7) { 
     $this.addClass('highest'); 
    } else if (val <= 4) { 
     $this.addClass('lowest'); 
    } else { 
     $this.addClass('medium'); 
    } 
}); 

Answer 3

$(".foo").each(function() 
       { 
       var layer=$(this); 
       var val=parseInt(layer.text()); 

       if(val>7)layer.addClass("highest") 
        else 
       if(val>4 && val<=7)layer.addClass("medium"); 
        else { 
         layer.addClass("lowest"); 
        }     
       }); 

Ici vous avez: http://jsfiddle.net/dactivo/n6GvJ/

Si vous préférez avec filtre même si elle est moins efficace:

$('.foo').filter(function(index) { 
    return parseInt($(this).text())>7 
     }).addClass("highest"); 

$('.foo').filter(function(index) { 
    return (parseInt($(this).text())>4 && parseInt($(this).text())<=7) 
}).addClass("medium"); 

$('.foo').filter(function(index) { 
    return parseInt($(this).text())<=4 
}).addClass("lowest"); 

Comme ici: http://jsfiddle.net/dactivo/5tGsj/