어떻게 배열을 통해 반복하고 jquery에서 항목을 동적으로 생성 할 수 있습니까?

Question

API 호출로부터 응답으로 반환 된 배열을 통해 루프하고 요소를 동적으로 만들고 싶습니다. 이것은, 내가 해결하려면 어떻게

<div id="customers-testimonials" class="owl-carousel">      
     <div class="item"> 
      <div class="shadow-effect"> 
       <img class="img-circle" src="http://themes.audemedia.com/html/goodgrowth/images/testimonial3.jpg" alt=""> 
       <p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p> 
      </div> 
      <div class="testimonial-name">EMILIANO AQUILANI</div> 
      <div class="shadow-effect"> <======= Repeated item 
       <img class="img-circle" src="http://themes.audemedia.com/html/goodgrowth/images/testimonial3.jpg" alt=""> 
       <p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p> 
      </div> 
      <div class="testimonial-name">EMILIANO AQUILANI</div> <======= Repeated item 
     </div> 
     <div class="item"> 
      <div class="shadow-effect"> 
       <img class="img-circle" src="http://themes.audemedia.com/html/goodgrowth/images/testimonial3.jpg" alt=""> 
       <p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p> 
      </div> 
      <div class="testimonial-name">EMILIANO AQUILANI</div> 
     </div> 
    </div> 

, 나는 동적으로 이런 구조를 만들

<div id="customers-testimonials" class="owl-carousel">      
    <div class="item"> 
     <div class="shadow-effect"> 
      <img class="img-circle" src="http://themes.audemedia.com/html/goodgrowth/images/testimonial3.jpg" alt=""> 
      <p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p> 
     </div> 
     <div class="testimonial-name">EMILIANO AQUILANI</div> 
    </div> 
    <div class="item"> 
     <div class="shadow-effect"> 
      <img class="img-circle" src="http://themes.audemedia.com/html/goodgrowth/images/testimonial3.jpg" alt=""> 
      <p>Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate.</p> 
     </div> 
     <div class="testimonial-name">EMILIANO AQUILANI</div> 
    </div> 
</div> 

내 코드,

$.ajax({ 
    url: "http://localhost:3333/testimonials", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    type: "GET", 
    success: function (response) {  
     jQuery.each(response, function(index, value){ 
      var item = $("<div class='item'></div>");         
      var shadowEffect = $("<div class='shadow-effect'></div>"); 
      var testimonialName = $("<div class='testimonial-name'>"+value.name+"</div>");         
      var review = $("<p></p>").text(value.review); 

      $("#customers-testimonials").append(item);          
      $(".item").append(shadowEffect,testimonialName); 
      $(".shadow-effect").append(review); 
     }); 
     } 
    }); 

이다 그러나 여기 난 내 코드를 얻을 것입니다 그것? 어떤 도움이 많이 감사

Answer 1

난 당신의 코드가 <img>를 생성하는 곳에서 모르겠지만 어쨌든 당신이 다음 코드

주

$.ajax({ 
 
    url: "http://localhost:3333/testimonials", 
 
    contentType: "application/json; charset=utf-8", 
 
    dataType: "json", 
 
    type: "GET", 
 
    success: function (response) {  
 
     jQuery.each(response, function(index, value){ 
 
     var ItemHtml = "<div class='item'>"+ 
 
          "<div class='shadow-effect'>"+ 
 
          "<img class='img-circle' src='http://themes.audemedia.com/html/goodgrowth/images/testimonial3.jpg' alt=''>"+ 
 
          "<p>"+value.review+"</p>"+ 
 
          "</div>" + 
 
          "<div class='testimonial-name'>"+value.name+"</div>"+ 
 
         "</div>";    
 

 
     $("#customers-testimonials").append(ItemHtml); 
 
     }); 
 
    } 
 
});

을 사용할 수 있습니다를 감상 할 수있다 : 코드에 수동으로 <img> 줄을 추가했습니다. <img> 코드 줄을 코드와 함께 변경할 수는 있지만 문제가 있다고 생각합니다. 예상대로 나를