2016-03-02 181 views
0

我想要javascript循環封裝兩行產品佈局後,我得到了來自ajax的迴應。如何在javascript中循環兩次?

旨意:我想導致像下面

<div class="owl-item"> 

    <div class="row item"> 
     <div class="product"> 
      <div class="image"> 
      <a href=""><img src="asset/img/main/9.jpg" alt="img"></a> 
      <div class="promotion"><span class="discount">4</span></div> 
       <div class="description"> 
        <div class="price"><span>1.0000</span></div> 
        <h4><a href="#"></a></h4><p>short detial</p> 
        </div> 
       </div> 
      </div> 
    </div> 

    <div class="row item"> 
     <div class="product"> 
      <div class="image"> 
       <a href=""><img src="9.jpg"alt="img"></a> 
       <div class="promotion"><span class="discount">4</span></div> 
       <div class="description"> 
        <div class="price"><span>2.0000</span></div> 
        <h4><a href="#"></a></h4> 
        <p>short detial</p></div> 
      </div> 
     </div> 
    </div> 

</div> 

正如上面的HTML計劃我要循環<div class="owl-item">一個時間,然後我會循環<div class="row item">兩次所以我的HTML佈局如下圖所示包裝我的產品。

$.ajax({ 
    type: "GET", 
    url: "<?php echo base_url('main/dataaccess'); ?>", 
    dataType: "json", 
    cache: false, 
    success: function (data, st) { 

     if (st == 'success') { 

      $.each(data, function (i, obj) { 

        var out = '<div class="row item">'; 

        out += '<div class="product">'; 
        out += '<div class="image">'; 
        out += '<a href=""><img src="asset/img/main/9.jpg" alt="img" class="img-responsive"></a>'; 
        out += '<div class="promotion"><span class="discount">' + obj.prodId + '</span> </div>'; 
        out += '<div class="description"><div class="price"><span>' + obj.prodPrice + '</span></div><h4><a href="#">' + obj.prodName + '</a></h4>'; 
        out += '<p>short detial</p>'; 
        out += '</div>'; 

        out += '</div>'; 
        $(out).appendTo("#ps"); 
      }); 

      $("#ps").owlCarousel({ 
       navigation: false, 
       pagination: false, 
       items: 8, 
       itemsTablet: [408, 2] 
      }); 
     } 
    } 
}); 

這是我想要得到 enter image description here

佈局但正如我的代碼,我會得到佈局如下,我不希望它 enter image description here

+0

所以....你想要換行嗎?這一切都取決於你的CSS或使用'
''。 –

+0

是的,我想要一個分解線 –

+0

離題提示:您可能想要在您的頁面中將* detial *更改爲* details *。 –

回答

0

做那些類之一這是適用於你的div集顯示:inline-block?我建議檢查呈現的頁面以確認div是顯示:塊。