각 개체를 '블록'요소에 추가하는 방법은 무엇입니까?

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

먼저 html 문자열로 jQuery 객체를 만듭니다.

그러면 해당 객체 내에서 현재 rating-hold을 찾아 아이콘을 추가 할 수 있습니다.

마지막으로, 당신은 당신의`HTML`하시기 바랍니다 공유 할 수 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); 
    } 

Answer 2

당신은 JQuery와 사용할 수 있습니다 .each documentation 당신은 각각 개별적으로 대신를 사용하는 별을 첫 번째 location에 모든 추가 위치 ID를 제공하려고하고, 할당 할 것이다, 혼자 .rating-hold를 사용하여 추가하는

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

Answer 3

:

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