Question

我有一个循环来循环创建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');
    }
  }

}

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

Answer 1

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>

希望你能有这样的逻辑。

您的代码将如下：

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

Answer 2

在Jquery中 - 使用wrap（）函数来包装html元素。

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

使用它，希望它成功。

使用bootstrap和java脚本如何使用for循环插入多行

2 个答案: