Question

ok say we have

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

and want to apply a css class of ‘highest’ to ‘span.foo’.text > 7
and css class of medium to values > 4 and <= 7
and css class of lowest to <= 4

example of desired result:

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

Is this a find and filter situation? I’m sure it’s common, but I can’t seem to find the best way to write it. Thanks

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"; 
});