Increase font size based on span text value

Question

I need to change font size based on value in the span

Numbers in the class name are not always the same

Problem: with text() I get all values (50020)

I need to use each() and $this somewhere. How?

thanx

<span class="emo_vote-1">50</span>
<p>smth.</p>
<span class="emo_vote-2">0</span>
<p>smth.</p>
<span class="emo_vote-3">20</span>

jQuery

var voteNumberSpan = jQuery("span[class^=\"emo_vote\"]");
    var voteNumber = voteNumberSpan.text();
    //console.log(voteNumber);
    if (voteNumber <= 30) {
        voteNumberSpan.css("fontSize","10px")
    } else if(voteNumber == 50) {
        voteNumberSpan.css("fontSize","16px")
    } else  {
        voteNumberSpan.css("fontSize","24px")
    }
    //I tried also:
    //voteNumberSpan.each(function (i) {
        //var voteNumber = voteNumberSpan.text();   
        //if (voteNumber < 30) {
        //voteNumberSpan.css("fontSize","10px")
        //} else if(voteNumber == 50) {
        //voteNumberSpan.css("fontSize","16px")
        //} else  {
        //voteNumberSpan.css("fontSize","24px")
        //}
    //});

jsfiddle http://jsfiddle.net/lima_fil/5VTN4/2/

Answer 1

http://jsfiddle.net/5VTN4/7/

    jQuery(document).ready(function(){

    jQuery("span[class^=\"emo_vote\"]").each(function(){
        var voteNumber = $(this).text();
    console.log(voteNumber);
    if (voteNumber <= 30) {
        $(this).css("fontSize","10px")
    } else if(voteNumber == 50) {
        $(this).css("fontSize","16px")
    } else  {
        $(this).css("fontSize","24px")
    }
    });
});

Answer 2

Try this fiddle: http://jsfiddle.net/5VTN4/5/

It uses the each approach and uses the tekst value for the size:

 jQuery(document).ready(function(){
     $("span[class^=\"emo_vote\"]").each(function(){
        alert($(this).text());
        $(this).css("fontSize", $(this).text() + "px")
     });
});

Answer 3

Because you've got three different class-names, for whatever reason, I'd suggest you add a generic class-name to associate all relevant span elements, and select by that (because using an attribute-starts-with selector is prone to failing if the class-name beginning with emo_vote doesn't appear first in the class-list), that said I'd suggest the following jQuery:

jQuery('span.emo-vote').css('font-size', function(){
    var s = parseInt($(this).text(), 10);
    if (s <= 30) {
        return '10px';
    }
    else if (s > 30 && s <= 50) {
        return '16px';
    }
    else {
        return '24px';
    }
});

Coupled with the following HTML:

<span class="emo_vote-1 emo-vote">50</span>
<p>smth.</p>
<span class="emo_vote-2 emo-vote">0</span>
<p>smth.</p>
<span class="emo_vote-3 emo-vote">20</span>

JS Fiddle demo .

Incidentally there's no need to use each() , css() (as I've shown, above) takes an anonymous function which will iterate over each of the elements returned by the selector (in which $(this) will relate to the current element over which the iteration is running).

References:

• css() .

Answer 4

Try this way:

1. Define the range of font size: from 10px to 24px.

2. Set rate to each span.

    <span class="emo_vote-1" data-i2="fontSize:[10,24],key:'k',rate:50" >50</span> <p>smth.</p> <span class="emo_vote-2" data-i2="key:'k',rate:0" >0</span> <p>smth.</p> <span class="emo_vote-3" data-i2="key:'k',rate:20">20</span> 

See demo