jQuery: AddClass

Question

我有一个列表，其中跨度包含一个数字。我想“复制”这个数字到一个样式(将宽度设置为百分比)在它旁边的一个跨度上。

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

我希望结果是这样的：

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

为什么这个不行？？

Answer 1

试试这个：

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

下面是一个有用的小提琴：http://jsfiddle.net/maniator/beK89/

另外，如果您只有一个css更改--您不需要.css调用中的一个对象--您只需做以下操作：.css("width", celebPct+"%");

Answer 2

Spans没有值，所以尝试文本：

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

Answer 3

不能在span上使用val()，您需要使用text()。此外，css选项的语法也是错误的。可以在不使用对象的情况下设置一个选项。加上来自text()的返回值是一个字符串值，而不是jQuery，所以在连接时不需要用jQuery包装它。

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