未能从同一类的2个div获得不同的值

Question

我有2个div具有相同的类，但它们具有不同的值。 我想在jQuery循环中使用不同的值，但由于某种原因，脚本只使用第一个div的值。

这里是demo fiddle

HTML：

<div class="temp-stars"><p>5</p></div> 
<div class="temp-stars"><p>2</p></div> 

CSS：

.temp-stars { position: relative; background: #666; padding: 10px; width: 100px; height: 10px; } 
.temp-stars p {display: none;} 
.stars {position: relative; width: 100%; height: 100%; } 
.single-star-yellow { width: 10px; height: 10px; background: #f90; float: left; margin-right:5px; } 

的jQuery：

$(function() { 
    var num = parseInt($(".temp-stars p").html()); 
    alert(num) 
    $(".temp-stars").append("<div class='stars'></div>") 
    for (var i = 0; i < num; i++) { 
     $(".stars").append("<div class='single-star-yellow'></div>") 

    }; 
}); 

Answer 1

您需要使用

$(".temp-stars").each(function() { 
    var num = parseInt($(this).find("p").html()); 

    var $star = $("<div class='stars'></div>").appendTo(this) 
    for (var i = 0; i < num; i++) { 
     $star.append("<div class='single-star-yellow'></div>") 
    }; 
}); 

演示：Fiddle

已使用的.html()吸气版本，以获得num值，它会始终在给定元素集合返回第一个元素的值。

你需要使用像上面那样的循环来解决它。

---

多一点书呆子

$(".temp-stars").each(function() { 
    var num = +$(this).find("p").html(); 

    $("<div class='stars'></div>").append(new Array(num + 1).join("<div class='single-star-yellow'></div>")).appendTo(this) 
}) 

演示：Fiddle