JQuery: AddClass

Question

I have a list where SPANs contains a number. I want to "copy" this number in STYLE (set the width as a percentage number) on the SPAN next to it.

HTML

<span class="celebName">Per</span>
<span class="celebPct">32</span>
<span class="celebBar"></span>

JQuery

$('.celebPct').each(function(index) {
    var celebPct = $(this).val();
    $(this).next(".celebBar").css({"width": + $(celebPct)+"%";});
});

I want the result to be like this:

<span class="celebName">Per</span>
<span class="celebPct">32</span>
<span class="celebBar" style="width:32%;"></span>

Why is this not working?

+3

curly_brackets May 19 '11 at 19:06

5 answers

Spaces don't matter, so try the text:

var celebPct = $(this).text();

+1

scrappedcola May 19, '11 at 19:08

val() , text(). css . . text() , jQuery, jQuery .

$('.celebPct').each(function(index) {
    var celebPct = $(this).text();
    $(this).next(".celebBar").css( "width", celebPct+"%" );
});

+1

tvanfosson 19 '11 19:09

cleared:

$('.celebPct').each(function(index) {
   var celebPct = $(this).text();
   $(this).next(".celebBar").css({"width": celebPct+"%"});
});

+1

mkoryak May 19 '11 at 19:09

This seems wrong:

var celebPct = $(this).val();

use

$(this).html()

instead, because span dont don't have .val just for input / selection.

so this should be the code:

$('.celebPct').each(function(index) {
    var celebPct = $(this).html();
    $(this).next(".celebBar").css({"width": celebPct + "%";});
});

no need to use $ (celebPct) since celebPct is not a jquery element

+1

Bernardo mendes May 19 '11 at 19:09

Neal · Accepted Answer · 2011-05-19T19:08:32+0000

Try the following:

$('.celebPct').each(function(index) {
    var celebPct = $(this).text();
    $(this).next(".celebBar").css({"width":  celebPct+"%"});
});

Also, if you have only one css change, you don't need the object in the call .css, you can just do:.css("width", celebPct+"%");