Question

我试图动态添加行并用3 col-sm-4填充它们，使用模数来反对函数返回对象中的对象数。

代码：

 function formatSeriesCard(series) {
    var card = "";

    console.log(countProperties(series));

    for (var i=0; i < countProperties(series); i++) {

    if (i % 3 == 0 ) {
        card += "<div class=\"row\">";
    }

    card += "<div class='col-sm-4' data-id="+i+">";
    card +=     "<div class='action-box'>";
    card +=         "<h4>" + '"' + series.name + '"' + "</h4>";
    card +=         "<p>";

相反，我将每行嵌套在前一行中。我想我需要测试第一个和最后一个。感谢。

Answer 1

这就是你想要的东西

Bootply ：http://www.bootply.com/2xnJBpyVsS

JS ：

var wantedcol=14;

var mycol='<div class="col-xs-4">mycol</div>';

var startRowLabel="<div class='row'>";
var endRowLabel="</div>";
var start = "";
var end="";

var toAppend="";
for(var i=0; i<wantedcol; i++){
  start="";
  if(i%3==0 || i==0){
    start=startRowLabel;
  }
  end="";
  if(i!=0 && (i%3==2 || i==wantedcol-1)){
    end=endRowLabel;
  }
  console.log(start+mycol+end);
  toAppend+=start+mycol+end;

}

$('.container').append(toAppend);

<强> HTML ：

<div class="container"></div>

评论：

您必须注意何时必须插入div.row开始和结束标记

使用modulo动态添加引导行

1 个答案: