javascript - 如何以有限的迭代次数执行 $.each 循环

Question

我正在努力显示各种属性及其图像和详细信息，这些属性来自 AJAX 响应。但问题是， slider 有许多幻灯片，每张幻灯片有 4 li 。

当我用 slider 附加结果 li 时，它将在第一张幻灯片中附加所有结果 li。

所以现在我想附加这些li(s)，仅使用单张幻灯片等等

这是我的 slider 代码

    <div class="work_carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">//here is first slide which have contains some dummy content
                    <ul class="thumbnails" id="work_property">
                        <li class="span3" >
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Property Name</h4>
                        <p>Property Description</p>

                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Property Name</h4>
                        <p>Property Description</p>

                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Property Name</h4>
                        <p>Property Description</p>

                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Property Name</h4>
                        <p>Property Description</p>

                            </div>
                        </li>

                    </ul>
              </div>
            <div class="item">//here is second slide which have contains some dummy content
                    <ul class="thumbnails">
                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#"><img src="http://placehold.it/360x240" alt=""></a>
                            </div>
                            <div class="caption">
                                <h4>Property Name</h4>
                        <p>Property Description</p>

                            </div>

                        </li>
                        </ul></div>

        </div>

        <div class="control-box" style="margin-bottom: 2em;">                            
            <a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
            <a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
        </div>

    </div>

</div>      
</div>
</div>

这是我的 AJAX 响应

jQuery.ajax({
           type:'POST',
           url:'<?php echo base_url("site/landing/get_work_places"); ?>',
           data:{ country_name:country },
           dataType: 'json', 

           success:function(data)
           {

                     var ParsedObject = JSON.stringify(data);  

                     var json = $.parseJSON(ParsedObject);

               if (json=="")
               {

                      alert("no results found");
               }else
               {

                   $.each(json, function(key, data) 
                     {

                          var product_id=data.product_id;
                          var product_name=data.product_title;

                         var product_image=data.product_image;


                         $("#work_property").append('<li class="span3"><div class="thumbnail"><a href="<?php echo base_url('rental'); ?>/'+product_id+'"><img src="'+product_image+'" alt=""></a></div><div class="caption"><h4>'+product_name+'</h4>  <p>Property Description</p></div></li>');



                      });
              }
           }
          });

这是带有 ajax 响应附加的结果 slider

Answer 1

您可以在追加后使用 slice 和 wrapAll 的组合将 4 个 li 包装在 ul 和 .item div 中到页面

$.each(json, function(key, data) {
  var product_id = data.product_id;
  var product_name = data.product_title;
  var product_image = data.product_image;
  $("#work_property").append('<li class="span3"><div class="thumbnail"><a href="<?php echo base_url('
    rental '); ?>/' + product_id + '"><img src="' + product_image + '" alt=""></a></div><div class="caption"><h4>' + product_name + '</h4>  <p>Property Description</p></div></li>');
});

for (i = 0; i <= $('.span3').length / 4; i++) {
  $('.span3').slice(i * 4, (i + 1) * 4).wrapAll('<div class="item active"><ul class="thumbnails">');
}

演示:https://jsfiddle.net/qv9r7o2d/1/

注意:您可能需要将列表项附加到 .carousel-inner div

$(".carousel-inner").append('<li class="span3"><div class="thumbnail"><a href="<?php echo base_url('rental'); ?>/'+product_id+'"><img src="'+product_image+'" alt=""></a></div><div class="caption"><h4>'+product_name+'</h4>  <p>Property Description</p></div></li>');