Question

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

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()的getter版本获取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

无法从具有相同类的2个div获得不同的值

1 个答案: