How to make two times for a loop in javascript?

Question

I want to javascript loop for wrapping two line of products layouts after i got a respond from ajax.

Purposed: I want to get result like below

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

As the above html planned I want to loop <div class="owl-item"> one times then I will loop <div class="row item"> two times So my html layout will wrap my products as the below images.

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

This is the layout that i want to get

But as my code I will got layout as below that I don't want it

So.... You want a line break? That all depends on your CSS or using something like `
`. — Mike Cluck, Mar 02 '16 at 17:59
Off-topic tip: you may want to change *detial* to *details* in your page. — Gediminas Masaitis, Mar 02 '16 at 20:22

score 0 · Answer 1 · answered Mar 02 '16 at 18:21

0

Are one of those classes that are applying to your div set as display:inline-block ? I suggest inspecting the rendered page to confirm that the divs are display: block.

answered Mar 02 '16 at 18:21

Observer

455
2
8

How to make two times for a loop in javascript?

1 Answers1