I have a products page that I want to show 3 items in each row and then if it has more, create a new row and show more. So 3 cols per row with unlimited rows. Below is the code that I have that contains my loop which I assume the code will need to go into.

$(data).find('products').each(function() {

            itemName = $(this).find('itemName').text();
            itemDesc = $(this).find('itemDesc').text();
            itemID = $(this).find('id').text();

                items +='<div class="row-fluid">\
                <div class="span3">Col 1</div>\
                <div class="span3">Col 2</div>\
                <div class="span3">Col 3</div>\
                </div>';

            count++;

        });

Here is where I need to do it but I am a little stuck on how to approach this. If the count is dividable by 3 I assume it will then need to create a new row.

Thanks for any help or input you can provide.

I have a products page that I want to show 3 items in each row and then if it has more, create a new row and show more. So 3 cols per row with unlimited rows. Below is the code that I have that contains my loop which I assume the code will need to go into.

$(data).find('products').each(function() {

            itemName = $(this).find('itemName').text();
            itemDesc = $(this).find('itemDesc').text();
            itemID = $(this).find('id').text();

                items +='<div class="row-fluid">\
                <div class="span3">Col 1</div>\
                <div class="span3">Col 2</div>\
                <div class="span3">Col 3</div>\
                </div>';

            count++;

        });

Here is where I need to do it but I am a little stuck on how to approach this. If the count is dividable by 3 I assume it will then need to create a new row.

Thanks for any help or input you can provide.

• javascript
• html
• loops

• 1 can you share your html and set up fiddle? – Kiran Commented Sep 17, 2013 at 5:16
• It's an Ajax call to the database. Just looping through an XML of all of the products. It will then just append the variable items to the dom. – SBB Commented Sep 17, 2013 at 5:18
• 1 You could also skip adding the row-fluid div, and simply add all the elements. Float them all left, and size it so 3 can fit in a row. Then the CSS will handle the layout, without adding row div's. Unless, of course, you REALLY need a container div, for each row. – Nicolai Commented Sep 17, 2013 at 5:29

6 Answers 6

First of all, no need to handle a count variable on your own, the .each() function already supplies an index element (as an optional argument).

With the modulus operator you can get the remainder from dividing the index by 3. Then you can tell when do you need to print the opening of the row and the ending of it.

$(data).find('products').each(function(index) {

    itemName = $(this).find('itemName').text();
    itemDesc = $(this).find('itemDesc').text();
    itemID = $(this).find('id').text();

        if ((index % 3) == 0) items += '<div class="row-fluid">';

        items += '<div class="span3">Col 1</div>';

        if ((index % 3) == 2) items += '</div>';
});

if (items.substr(-12) != '</div></div>') items += '</div>';

Going left field, don't! Use CSS instead.

Style up your span3 class to have a with of 30ish % with a display of inline block. That way when you decide to display 2, 4 or 60 per row you only need to change the CSS. This also opens you up to change the number of items per row with CSS media queries for diferent viewports e.g. mobile.

Further more this way you don't need to worry about closing off the row when your items returned aren't divisible by 3

On a side note, if you decide to go the CSS route, consider using <ul> and <li> instead, as semanticaly you have a list.

http://jsfiddle.net/UKQef/1/

Update Fiddle updated to demonstrate use of li and the flexibility of this approach.

You should use modulus: http://msdn.microsoft.com/en-us/library/ie/9f59bza0(v=vs.94).aspx It gives you a remainder back from dividing two numbers so you could probably do this with something like (inside your .each):

if(!($(this).index() % 2)){
  // Add your row
}

$(this).index() returns the index of your .each() and the % 2 returns the remainder of that index divided by 2 so the first 3 times this runs it'd be like this:

• 0 / 2 = 0 = add a row
• 1 / 2 = .5 = don't add a row
• 2 / 2 = 1 = don't add a row

Hopefully this is what you meant.

Here's what I think is a cleaner approach:

// Map each product to a cell.
var cells = $(data).find('products').map(function() {
    var itemName = $(this).find('itemName').text();
    var itemDesc = $(this).find('itemDesc').text();
    var itemID = $(this).find('id').text();
    return $('<div></div>').addClass('span3').text(itemName+' '+itemDesc+' '+itemID);
});

// Collect the cells into rows.
var rows = [];
for (var i=0, j=cells.length; i<j; i+=3) {
    rows.push(
      $('<div></div>')
        .addClass('row-fluid')
        .append(cells.slice(i,i+3))
    );
}

The best approach to your issue is using jquery template. you can fetch your data in Json format by ajax request and create rows dynamically by jquery template:

 <script src="jquery.tmpl.js" type="text/javascript"></script>

 <script type="text/javascript">
   $(document).ready(function() {
   var data = [
   { name: "Astor", product: "astor", stocklevel: "10", price: 2.99},
   { name: "Daffodil", product: "daffodil", stocklevel: "12", price: 1.99},
   { name: "Rose", product: "rose", stocklevel: "2", price: 4.99},
   { name: "Peony", product: "peony", stocklevel: "0", price: 1.50},
   { name: "Primula", product: "primula", stocklevel: "1", price: 3.12},
   { name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: 0.99},
   ];
   $('#flowerTmpl').tmpl(data).appendTo('#row1');
   });
  </script>

  <script id="flowerTmpl" type="text/x-jquery-tmpl">
   <div class="dcell">
   <img src="${product}.png"/>
   <label for="${product}">${name}:</label>
   <input name="${product}" data-price="${price}" data-stock="${stocklevel}"
   value="0" required />
   </div>
  </script>

Html:

<div id="row1" class="drow"></div>

var $products = $(data).find('products');
var num_of_rows = Math.ceil($products.length/3)
//Create your rows here each row should have an id = "row" + it's index
$products.each(function(i,val){
    var row_index = Math.ceil(i/3)
    $('#row' + row_index).append("<div>Col"+i%3+"</div>")
});

Something like that should work