Question

So I am trying to build this reputation bar for my site which will solely depend only on given number. The functionality should be something like this.

If div has value 1-10, add class="beginner"
If div has value 11-20, add class="mediocre"
If div has value 21-30, add class="hardcore"
and so on..

I have this:

<div><a>7</a></div>

What I want is this:

<div class="beginner"><a>7</a></div>

I thought I should start with something like this:

$("div:contains('0>10')").addClass("begginer");

but I am pretty much sure that’s not going to work. Can anyone help me with this? I am pretty lost here 🙁

Answer 1

jsBin demo

var rated = $('div a');                  // SET YOUR 'numbers' source
var r = parseInt( rated.text(), 10 );    // parse integers with radix
var rate = 'beginner';                   // SET INITIAL RATE

  if ((r > 10) && (r <= 20)) { rate = 'mediocre'; }
  if ((r > 20) && (r <= 30)) { rate = 'hardcore'; } 

rated.addClass(rate);                    // FINALLY ADDCLASS TO ELEMENT