Javascript循环迭代问题答案

【问题标题】：Javascript Loop Iteration IssueJavascript循环迭代问题
【发布时间】：2016-01-14 13:52:57
【问题描述】：

我想运行一个 for 循环，该循环将生成一个包含单个链接的新 div（类“容器”）。例如。第一个 div 将显示“link6.php”，第二个 div 将显示“link5.php”等。但是，目前似乎每个 div 中的循环都用完了完整的循环（我附上了一张显示这个的图片）。

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

提前非常感谢您。我是新手，非常感谢您的帮助；）

【问题讨论】：

您应该深入了解 jQuery 文档并了解他们关于 DOM 选择的规范。不过，我可以帮你解决这个问题。
对不起，@EnglishMaster 我是新手！非常感谢您的帮助！

标签： javascript php jquery loops for-loop

【解决方案1】：

问题在于，在追加 div 之后，您选择了所有 .container 元素并将文本追加到每个元素。您似乎没有理由不能执行以下操作。

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

【讨论】：

非常感谢！我用过这个，效果很好。比我得到的要简单得多...... :)

【解决方案2】：

这是我对您的代码的建议。我建议你先缓存东西，然后了解 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/

【讨论】：

【解决方案3】：

当您执行$(".container").append() 时，它会附加到带有class="container" 的每个 DIV，而不仅仅是您刚刚在此循环中附加的那个。\

解决此问题的简单方法是将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/>"
});

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

var container = $('<div class="container">').appendTo("#everything");
var link = "link" + i + ".php" + "<br />";
container.append(link);

【讨论】：

【解决方案4】：

问题在于，每次您执行 $('.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>

【讨论】：

【解决方案5】：

您为每个 div 赋予“容器”类，然后在所有 .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);
}

【讨论】：

说实话，这很好，但我不推荐。在这种情况下使用类是没有意义的。