не в состоянии получить различные значения от 2 делений с тем же классом

Question

не в состоянии получить различные значения от 2 делений с тем же классом

0

У меня есть 2 divs с тем же классом, но у них разные значения. Я пытаюсь использовать разные значения в цикле 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>")

    };
});

Eyal Binehaker 26 март 2014, в 02:51

Источник

Теги:

jquery

html

for-loop

1 ответ

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-03-25T22-18-00.000Z

Вы должны использовать

$(".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>")
    };
});

Демо: скрипка

Вы использовали геттерную версию .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)
})

Демо: скрипка

Спасибо. это работает на отлично Я действительно пытался использовать каждую функцию, но, просматривая ваш код, я понимаю, что в моей попытке пропало много вещей.