лучший способ jquery для поиска, фильтрации и применения классов CSS

Question

хорошо, скажем, у нас есть

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

и мы хотим применить класс css 'наивысший' к 'span.foo'.text> 7 и класс css medium к значениям> 4 и <= 7и класс css от наименьшего до <= 4 </p>

пример желаемого результата:

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

Это ситуация поиска и фильтрации?Я уверен, что это распространено, но я не могу найти лучший способ написать это.Спасибо

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

Вы можете сделать это с помощью команды find / filter.Было бы проще сделать это с 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");
                   }                  
               });

Вот оно: http://jsfiddle.net/dactivo/n6GvJ/

Если вы предпочитаете использовать фильтр, даже если он менее эффективен:

$('.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");

Как здесь: http://jsfiddle.net/dactivo/5tGsj/