javascript - 使用模动态添加 Bootstrap 行

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 开始和结束标记