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>，但无论如何您可以使用下一个代码

＆＃13;

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

＆＃13;

注意：我在代码中手动添加了<img>行..您可以使用代码更改<img>代码行..但我认为您从这样编码..对我来说，使用更多时可能会有点混乱 创建和追加，所以我总是喜欢这种方式来保存我的代码明确让我阅读

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

1 个答案: