Question

所以，我正在尝试创建一个HTML代码生成器，只是为了好玩。我的实际问题是：如何从另一个div内的循环中追加div s，该循环不存在并保存在变量中？

我希望我很清楚，谢谢你。

我的小JavaScript直到现在：

colCont = $("<div class=\"stab-cont\"><div class=\"stab-row\"></div></div>");

function repeat(n) {
  for (var i = 1; i < n + 1; i++) {
    //Here I need to insert the n DIVs generated by this loop
  }
}

repeat(3);

console.log(colCont);

JSFiddle：http://jsfiddle.net/qo3vdwhv/

Answer 1

也许我在这里思考它，但这应该有用。

我的代码：

＆＃13;

colCont = $("<div class=\"stab-cont\"></div>");

function repeat(n) {
  for (var i = 1; i < n + 1; i++) {
    $("<div class=\"stab-row\"></div>").appendTo(colCont); //build your div like you did with "colCont" and append the new div to colCont
  }
}

repeat(3);

colCont.appendTo($("body"))

＆＃13;

.stab-cont div {
  border: 1px solid #c00;
  margin: 10px;
  float: left;
  width: 200px;
  height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

这里需要考虑的事情;而不是使repeat()函数依赖于colCont，而是将其改为jQuery函数。

在这种情况下，我创建了一个函数，它将重复jQuery对象的内容N次（N> = 1）。

＆＃13;

colCont = $("<div class=\"stab-cont\"></div>");

jQuery.fn.times = function(n) {
  var len = this.length;

  for (var i = 1; i < n; ++i) {
    for (var k = 0; k < len; ++k) {
      this.push(this[0].cloneNode(true));
    }
  }
  return this;
};

colCont
  .append($('<div class="stab-row"></div>').times(3))
  .appendTo('body');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如何将div添加到变量中的另一个div中？

2 个答案: