javascript - 使用 bootstrap 和 java 脚本，如何使用 for 循环在一行中插入几列

Question

我有一个 for 循环，它循环创建 div 并使用 java 脚本将其附加到内容区域，我正在使用 bootstrap，因此内容应该显示在具有 3 个 div 的行中，每个 div 都有 col-md-4 类，所以它是这样的:

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');
    }
  }

}

问题是我如何在循环内以动态方式将具有“col-md-4”类的每 3 个 div 包装在一个具有“row”类的 div 中？

Answer 1

在 Jquery 中 - 使用wrapp() 函数来包装 html 元素。

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

用这个，希望能成功。