jQuery：AddClass

Question

我有一个列表，其中SPAN包含一个数字。我想在旁边的SPAN上将这个号码“复制”到STYLE（将宽度设置为百分比）。

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

我希望结果如下：

<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没有值，所以请尝试使用text：

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

Answer 3

您无法在某个范围内使用val()，您需要使用text()。你的css选项的语法也是错误的。您可以在不使用对象的情况下设置一个选项。另外，text()的返回值是一个字符串值，而不是jQuery，因此在连接时不需要用jQuery包装它。

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

Answer 4

• 使用text()而不是val()来获取div的内部文本。 val用于输入
• 无需将生成的celebPct包装到jquery
中
• 您传入css
的哈希中有一些语法错误

清理：

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

Answer 5

这似乎是错误的：

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

使用

$(this).html()

相反，因为span没有.val只有输入/选择才有它。

所以这应该是代码：

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

不需要使用$（celebPct），因为celebPct不是jquery元素