jQuery：添加类

Question

我有一个列表，其中的SPAN包含一个数字。我想要将这个数字“复制”到旁边的另一个SPAN的样式中（将宽度设置为该数字的百分比）。

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>

为什么这个不起作用？

- curly_brackets

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

- Naftali

Answer 2

你不能在标签上使用val()，你需要使用text()。此外，你的CSS选项语法是错误的。你可以设置一个选项而不使用对象。另外，text()的返回值是一个字符串值，而不是jQuery对象，因此在连接时不需要用jQuery包装它。

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

- tvanfosson

Answer 3

• 使用text()而不是val()来获取
  标签的内部文本。 val()适用于输入框
• 不需要将结果的celebPct包装成jquery
• 你在传入css的哈希表中有一些语法错误

清理后：

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

- mkoryak

Answer 4

这似乎是错误的：

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 元素

- Bernardo Mendes

Answer 5

跨度没有值所以尝试使用文本：

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

- scrappedcola