Question

好吧我们有

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

并希望将“最高”的css类应用于'span.foo'。text＆gt; 7 ＆css class of medium to values＆gt; 4和＆lt; = 7 和css类最低到＆lt; = 4

期望结果的示例：

<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/

最好的jquery方法来查找和过滤并应用css类

3 个答案: