using bootstrap and java script how do i insert several columns in a row using for loop

Question

I have a for loop that is looping to create divs and appending it to a content area using java script, I am using bootstrap so the content should be displayed in rows with 3 divs each have col-md-4 class it, so it is like this:

function add_to_page(product) {

 for (var category in product) {
  for (var i = 0; i < product[category].length; i++) {
    $('#content').append($('<div id=' + product[category][i].id +'>').html($('<img>').attr('src', product[category][i].img)));
    $('#' + product[category][i].id).append($('<div class=name>').text(product[category][i].name));
    $('#' + product[category][i].id).append($('<div class=category>').text(product[category][i].category));
    $('#' + product[category][i].id).append($('<div class=price>').text('Price: ' + product[category][i].price + 'L.E'));
    $('#' + product[category][i].id).addClass('col-md-4');
    }
  }

}

the question is how do i wrap every 3 divs that has the class 'col-md-4' in a div with a class of 'row' in dynamic way inside the loop ?

Vinod kumar G · Accepted Answer · 2017-08-17 06:00:09Z

0

In Jquery - use wrap() function to wrap up the html elements.

$( ".col-md-4" ).wrap( "<div class='row'></div>" );

use this, hope it worked out.

answered Aug 17, 2017 at 6:00

Vinod kumar G

6657 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gjijo · Accepted Answer · 2017-08-17 06:33:27Z

0

var LsObj = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var row = $('<div class="row"></div>');
for (var i = 1; i < LsObj.length - 1; i++) {
  row.append($('<div class="col-md-4">' + LsObj[i - 1] + '</div>'));
  if (i % 3 == 0) {
    $('.container').append(row.clone(true));
    row = $('<div class="row"></div>');
  }
}

.row{
  border:1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>

Hope you can some logic like this.

Your code will be like:

function add_to_page(product) {
    var row = $('<div class="row"></div>');
    for (var category in product) {
        for (var i = 0; i < product[category].length; i++) {
            row.append($('<div id=' + product[category][i].id + '>').html($('<img>').attr('src', product[category][i].img)));
            $('#' + product[category][i].id).append($('<div class=name>').text(product[category][i].name));
            $('#' + product[category][i].id).append($('<div class=category>').text(product[category][i].category));
            $('#' + product[category][i].id).append($('<div class=price>').text('Price: ' + product[category][i].price + 'L.E'));
            $('#' + product[category][i].id).addClass('col-md-4');
            if ((i + 1) % 3 == 0) {
                $('#content').append(row.clone(true));
                row = $('<div class="row"></div>');
            }
        }
    }
}

edited Aug 17, 2017 at 6:33

answered Aug 17, 2017 at 5:55

gjijo

1,20612 silver badges16 bronze badges

1 Comment

M. Gamie Over a year ago

the above loop is very close for what i would like to do except there are two issues: 1) it is not creating the name, price, and category divs inside the $('<div id=' + product[category][i].id + '>'). 2) It starts inserting 3 divs in the first row, but the second and the third row it inserts 4 divs, which i don't want , i want only 3 divs of $('<div id=' + product[category][i].id + '>') in each row

Collectives™ on Stack Overflow

using bootstrap and java script how do i insert several columns in a row using for loop

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related