Javascript 使用 jQuery 中的 for 循环创建 div 并为每个 div 分配 ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13814057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create divs using a for loop in jQuery and assign IDs to each div
提问by Paul
I am currently creating divs using a for loop.
我目前正在使用 for 循环创建 div。
The problem is when I try to assign a unique id to every div element that is being created within the for loop.
问题是当我尝试为在 for 循环中创建的每个 div 元素分配一个唯一的 id 时。
I am getting closer but at the moment the count starts at 36 instead of being 1.
我越来越近了，但目前计数从 36 开始，而不是 1。
Thanks so much for you help!
非常感谢您的帮助！
Here is my html:
这是我的 html：
<!DOCTYPE html>
<html>
<head>
<title>Intro Webpage!</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>
Now, this is my script.js:
现在，这是我的 script.js：
for(i = 0; i < 35; i++) {
$(document).ready(function(){
$('body').append('<div id="div'+ (i++) +'" />');
});
}
Also, my css:
另外，我的CSS：
div {
width: 167px;
height: 167px;
border-radius: 10px;
background-color: #ff0000;
display: inline-block;
margin-left: 5px;
}
回答by Adil
You need to put loop in side document.ready instead of putting document.ready in loopalso you may not need to increament iwithin loop body as it is increamentedin loop signature. You can read more about document.ready here
您还需要将loop in side document.ready instead of putting document.ready in loop您可能不需要i在循环体中增加，因为它increamented在循环签名中。您可以在此处阅读有关 document.ready 的更多信息
$(document).ready(function(){
for(i = 0; i < 35; i++) {
$('body').append('<div id="div'+ i +'" />');
}
});
回答by Sang Suantak
All the provided answers will do the job but if you want to make it faster, you can do it like this. Also, if you want the divid to start with 1, you should do ++iinstead of i++. i++doesn't make sense since that's being done by the for loopautomatically.
所有提供的答案都可以完成这项工作，但如果你想让它更快，你可以这样做。此外，如果您希望divid 以 1 开头，则应该++i使用i++. i++没有意义，因为这是由for loop自动完成的。
$(document).ready(function() {
var divsToAppend = "";
for (i = 0; i < 35; i++) {
divsToAppend += '<div id="div' + (++i) + '" />';
}
$('body').append(divsToAppend);
});??
回答by Akhil Sekharan
Try:
尝试：
$(document).ready(function(){
var html='';
for(i = 0; i < 35; i++) {
html += '<div id="div'+ i +'" />';
}
$('body').append(html);
});
回答by Joe Mills
Take the $(document).ready out of the loop for starters.
将 $(document).ready 从初学者的循环中取出。
$(document).ready(function() {
// do loop here
}
