Javascript循环迭代问题

-1

我想运行一个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); 
}

非常感谢你提前。我是新的在这和你的帮助是非常感谢;）

来源

2015-10-15 ar002

你本来应该有一个见解查看jQuery文档并了解他们关于DOM选择的规范。不过，我可以帮助你。 – Jason

对不起，@EnglishMaster我是新来的！非常感谢您的帮助！ – ar002

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

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

来源

2015-10-15 22:55:56

非常感谢！我用这个，它工作得很好。比我所得到的要简单得多...:) – ar002

不客气，很高兴我能提供帮助。 –

-2

你给每个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); 
}

来源

2015-10-15 22:56:35

说实话，这很好，但我不推荐它。在这种情况下使用类没有意义。 – 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>

来源

2015-10-15 22:56:41 Joseph

-1

这是我对你的代码的建议。我建议你首先缓存一些东西，并理解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/

来源

2015-10-15 22:59:39 Jason

当你做$(".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);

来源

2015-10-15 22:59:40 Barmar

谢谢@Barmar！ – ar002

Javascript循环迭代问题

回答

相关问题