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> 

爲什麼不TH是工作？

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

跨度沒有值，所以嘗試文本而不是：

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() 

相反，因爲跨度沒有.val只有輸入/選擇有它。

所以這應該是代碼：

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

沒有必要使用$（celebPct）作爲celebPct不是一個jQuery元素