如何在jquery中循环数组并动态创建项？

Question

我想循环一个数组，该数组作为api调用的响应返回，并使用它动态创建元素。这是我的密码

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

我想动态地创建一个这样的结构，

<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>

但这是我的代码

<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>

我该怎么解决呢？任何帮助都是非常感谢的。

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>代码行。但我想你明白用这种方式编码的意义..。对我来说，它可能有点混乱，同时使用更多的创建和附加，所以我总是喜欢这种方式来保持我的代码清晰，让我阅读。