Javascript循环迭代问题

Question

我想运行一个for循环，它会生成一个包含单个链接的新div（包含＃39; container＆＃39;）。例如。第一个div将显示＆＃39; link6.php＆＃39;，第二个div将显示＆＃39; link5.php＆＃39;然而，目前似乎循环在每个div中都用完了整个循环（我附上了一张图片显示了这一点）。

for (var i = 6; i > 0; i--) {
    $('#everything').append('<div class="container"></div>');
    var link = "link" + i + ".php" + "<br />";
    $('.container').append(link);
}

非常感谢您提前。我是新来的，非常感谢你的帮助;）

Answer 1

问题在于，在附加div后，选择所有.container元素并将文本附加到每个元素。似乎没有理由不能做到以下几点。

for (var i = 6; i > 0; i--) {
    $('#everything').append('<div class="container">link'+i+'.php<br /></div>');
}

Answer 2

问题在于，每次执行$('.container').append(link);时，$('.container')都会收集所有现有的div，包括之前迭代中添加的div，并将链接附加到每个div。

不要重新收集它们，而是重用现有的容器引用。您可以链接append和appendTo。

for (var i = 6; i > 0; i--) {
  $('<div class="container"/>')  // create container
    .append("link" + i + ".php") // append container with link
    .appendTo('#everything');    // append container to everything
}

#everything {
  padding: 10px;
  border: 1px solid blue;
}
.container {
  padding: 10px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="everything"></div>

Answer 3

执行$(".container").append()后，它会{{1>}附加每个 DIV，而不仅仅是您在此循环中附加的那个。\

解决此问题的简单方法是将class="container"包含在link附加的内容中。

#everything

或者您可以将容器创建为对象：

for (var i = 6; i > 0; i--) {
    var link = "link" + i + ".php" + "<br />";
    $('#everything').append('<div class="container">' + link + '</div>');
}

或者您可以将容器分配给变量并附加到它：

$('#everything').append($('<div>', {
    "class": "container",
    html: "link" + i + ".php<br/>"
});

Answer 4

这是我对您的代码的建议。我建议你先缓存一下，然后了解jQuery的DOM选择是如何工作的。

var everythingCached = $('#everything');
var container = $('<div class="container"></div>');

for (var i = 6; i >0; i--) {
    var cached = everythingCached.append(container);
    var link = "link" + i + ".php" + "<br />";
    cached.append(link);
}

https://jsfiddle.net/47g4f14p/

Answer 5

您为每个div提供了容器＆＃39;然后在所有.containers上运行append（）。

您需要为div提供唯一ID，或者直接通过对象引用它。 举个例子：

for (var i = 6; i > 0; i--) {
    $('#everything').append('<div class="container'+i+'"></div>');
    var link = "link" + i + ".php" + "<br />";
    $('.container'+i).append(link);
}