for循环中不能有多个append()

时间:2016-01-10 12:29:42

标签: jquery

我正在尝试使用以下代码将40个新div元素追加到#colors div:

$( document ).ready(function() {
    var $node = $("<div></div>");
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        $divg.append($node);
    }
});

最后我得到以下内容:

<div id="colors">
    <div></div>
</div>

有人可以告诉我发生了什么事吗?

我无法弄清楚。

4 个答案:

答案 0 :(得分:1)

执行var $node = $("<div></div>");时,您正在创建一个jQuery对象,其中包含一个新创建的div,它尚未在DOM中。第一次附加它,你把它放在DOM中。第二次添加它时,你移动它。 (好吧,如果你把它附加到别的东西上,你会这么做,但实际上你只是把它放在同一个地方。)

如果您想要多个 div,则需要创建多个。 clone会这样做,但在该代码中,您可以直接执行此操作。

Append非常满意标记:

$( document ).ready(function() {
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        $divg.append("<div></div>");
    }
});

或者,如果首先创建元素是很重要的,因为你正在用它做事:

$( document ).ready(function() {
    var $node;
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        $node = $("<div></div>");
        $divg.append($node);
    }
});

或使用clone,但在这种情况下我可能不会:

$( document ).ready(function() {
    var $node = $("<div></div>");
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        $divg.append($node.clone());
    }
});

(请注意,从技术上讲,这会创建一个额外的div,但它很好,这并不昂贵,并且不会在任何地方添加到DOM。)

答案 1 :(得分:1)

我不能更好地解释T.J的解释。使用clone()功能创建新的div

$( document ).ready(function() {
    var $divg = $('#colors');
    var $node = $("<div></div>");
    for (var i = 1; i <= 40; i++) {
        $divg.append($node.clone());
    }
});
#colors div{
  border : 1px solid red;
  width : 50px;
  height : 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colors">
    <div></div>
</div>

答案 2 :(得分:1)

我使用普通的JavaScript(我把它包装在$(function(){})中,因为我最初会编写jQuery。)因为(至少对我来说)它更容易阅读代码(加上我很糟糕)在jQuery上有太多选项让我的思绪变得懒惰。)

尽管克隆是实现目标的常用方法,但还有其他方法可以迭代创建createElement()appendChild();

等元素

&#13;
&#13;
$(function() {
  for (var i = 0; i < 40; i++) {
    var shade = document.getElementById('colors');
    var x = document.createElement('div');
    x.classList.add('x');
    shade.appendChild(x);
  }
});
&#13;
#colors {
  border: 3px inset black;
  min-height: 30px;
  max-width: 300px;
  display: table;
}
.x {
  border: 1px solid red;
  min-width: 30px;
  border-radius: 50%;
  display: table-cell;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>


<div id="colors">
  <div></div>
</div>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

将var $ node = ..转移到循环中:

$( document ).ready(function() {
    var $divg = $('#colors');
    for (var i = 1; i <= 40; i++) {
        var $node = $("<div></div>");
        $divg.append($node);
    }
});

甚至:

 $divg.append("<div></div>");