Javascript循环迭代问题
我想运行一个for循环,该循环将生成一个包含单个链接的新div(包含'container'类)。例如。第一个div会显示'link6.php',第二个div会显示'link5.php'等等。但是,目前看起来循环在每个div中都已经耗尽了整个循环(我附上了一张显示这个的图片)。Javascript循环迭代问题
for (var i = 6; i > 0; i--) {
$('#everything').append('<div class="container"></div>');
var link = "link" + i + ".php" + "<br />";
$('.container').append(link);
}
非常感谢你提前。我是新的在这和你的帮助是非常感谢;)
问题是,你附加div后,你选择所有.container
元素并将文本追加到每个。似乎没有理由不能做到以下几点。
for (var i = 6; i > 0; i--) {
$('#everything').append('<div class="container">link'+i+'.php<br /></div>');
}
非常感谢!我用这个,它工作得很好。比我所得到的要简单得多...:) – ar002
不客气,很高兴我能提供帮助。 –
你给每个div的类“容器”,然后运行的append()上的所有.containers。
您需要给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);
}
说实话,这很好,但我不推荐它。在这种情况下使用类没有意义。 – Jason
问题是因为每次你做$('.container').append(link);
,该$('.container')
收集所有现有的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>
这是我对你的代码的建议。我建议你首先缓存一些东西,并理解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);
}
当你做$(".container").append()
,其追加到每 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/>"
});
,或者你可以在容器分配给一个变量,并追加到它:
var container = $('<div class="container">').appendTo("#everything");
var link = "link" + i + ".php" + "<br />";
container.append(link);
谢谢@Barmar! – ar002
你本来应该有一个见解查看jQuery文档并了解他们关于DOM选择的规范。不过,我可以帮助你。 – Jason
对不起,@EnglishMaster我是新来的!非常感谢您的帮助! – ar002