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

【问题标题】：How to append each object to its respective 'block' of elements?如何将每个对象附加到其各自的“块”元素？
【发布时间】：2017-05-31 21:25:05
【问题描述】：

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，但是，这些评论正在累积并相互添加，而不是附加到各自的类中，它们继续前进。第一个评级完美地插入了自己，但之后他们开始相互添加自己。

【问题讨论】：

你能分享你的HTML吗？
@Tha'erAl-Ajlouni 我只有一个 id 为“clubbing-locations”的 div，我也附加了 html 和对象。
在下面查看我的答案，我已经完成了你需要的。

标签： javascript jquery json

【解决方案1】：

首先使用您的 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);
    }

【讨论】：

谢谢，这很有效，以后一定要记住这一点

【解决方案2】：

你可以使用 JQuery .each documentation

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

【讨论】：

【解决方案3】：

您正在单独使用 .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>");
    }
}

【讨论】：