Question

var clubbingLocations = $('#clubbing-locations');

$.getJSON("/js/location.json", function(data) { //load json

    for (var i = 1; i <= data.locations.length; i++){ //loop through json, append html and objects
        clubbingLocations.append("<div class='night-type location'>" + 
        "<a href='location.html'>" +
        "<div class='overlay'>" +
        "<div class='overlay'>" +
        "<span class='fav checked glyphicon glyphicon-heart' aria-hidden='true'></span>" +
        "<h4>" + data.locations[i].name + "</h4>" +
        "<div class='rating-hold'>" +
        "</div>" +
        "</div>" +
        "</a>" +
        "</div>"
        );
        for (var j = 1; j <= data.locations[i].rating; j++){
            $('.rating-hold').append("<span class='filled glyphicon glyphicon-star' aria-hidden='true'></span>");
        }
    }

我试图将对象的评论附加到其各自的rating-hold，但是，评论正在累积并相互添加，而不是附加到相应的类，他们继续前进。第一个评级完全插入自己，但之后他们开始互相添加。

Answer 1

您可以使用JQuery .each documentation

$('.rating-hold').each(function(index){
    $(this).append('html code here');
})

Answer 2

仅使用.rating-hold进行追加，会将所有内容追加到第一个location，尝试提供位置ID，并使用此分别为每个明星分配星号：

var clubbingLocations = $('#clubbing-locations');

$.getJSON("/js/location.json", function(data) { //load json

for (var i = 0; i <= data.locations.length - 1; i++){ //loop through json, append html and objects
    clubbingLocations.append(
        "<div id='location" + i + "' class='night-type location'>" + 
        "<a href='location.html'>" +
        "<div class='overlay'>" +
        "<div class='overlay'>" +
        "<span class='fav checked glyphicon glyphicon-heart' aria-hidden='true'></span>" +
        "<h4>" + data.locations[i].name + "</h4>" +
        "<div class='rating-hold'>" +
        "</div>" +
        "</div>" +
        "</a>" +
        "</div>"
    );

    for (var j = 0; j <= data.locations[i].rating; j++){
        $('#location' + i + ' .rating-hold').append("<span class='filled glyphicon glyphicon-star' aria-hidden='true'></span>");
    }
}

Answer 3

首先使用html字符串创建一个jQuery对象。

然后，您可以在该对象中搜索以查找当前rating-hold并向其添加图标。

最后，将包含图标的整个对象追加到clubbingLocations

for (var i = 0; i <= data.locations.length - 1; i++){ //loop through json, append html and objects
    // create jQuery object
    var $nightType= $("<div class='night-type location'>" + 
        "<a href='location.html'>" +
        "<div class='overlay'>" +
        "<div class='overlay'>" +
        "<span class='fav checked glyphicon glyphicon-heart' aria-hidden='true'></span>" +
        "<h4>" + data.locations[i].name + "</h4>" +
        "<div class='rating-hold'>" +
        "</div>" +
        "</div>" +
        "</a>" +
        "</div>"
        );


        for (var j = 0; j <= data.locations[i].rating; j++){
            // append icons to object created above
            $nightType.find('.rating-hold').append("<span class='filled glyphicon glyphicon-star' aria-hidden='true'></span>");
        }
         // append object to dom
         clubbingLocations.append($nightType);
    }

如何将每个对象附加到其各自的“块”元素？

3 个答案: