在jQuery中使用for循环创建div，并为每个div分配ID

我目前使用for循环创建div。在jQuery中使用for循环创建div，并为每个div分配ID

问题是，当我尝试为for循环内创建的每个div元素分配一个唯一的id。

我越来越近，但此刻的数量在36开始的而不是1

非常感谢您的帮助！

这里是我的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>

现在，这是我的script.js：

for(i = 0; i < 35; i++) { 
$(document).ready(function(){ 
    $('body').append('<div id="div'+ (i++) +'" />'); 
}); 
}

而且，我的CSS：

div { 
width: 167px; 
height: 167px; 
border-radius: 10px; 
background-color: #ff0000; 
display: inline-block; 
margin-left: 5px; 
}

来源

2012-12-11 Paul

你需要把loop in side document.ready instead of putting document.ready in loop也你可能不需要在循环体内增加i，因为它是循环签名中的increamented即你可以阅读更多有关的document.ready here

$(document).ready(function(){ 
    for(i = 0; i < 35; i++) { 
    $('body').append('<div id="div'+ i +'" />'); 
    } 
});

来源

2012-12-11 05:17:10 Adil

你可能不想在代码中使用两个i ++ –

非常感谢！它正在工作！ – Paul

采取$（文件）。就绪圈外对于初学者的。

$(document).ready(function() { 
    // do loop here 
}

来源

2012-12-11 05:17:17

尝试：

$(document).ready(function(){ 
    var html=''; 
    for(i = 0; i < 35; i++) { 
     html += '<div id="div'+ i +'" />'; 
    } 
    $('body').append(html); 
});

来源

2012-12-11 05:17:41

非常感谢！它正在工作！ – Paul

所提供的所有答案将做的工作，但如果你想更快，你能做到这样。另外，如果您想让div ID以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); 
});

来源

2012-12-11 05:23:44

你说这可以让它变得更快。怎么样？ – Paul

每次循环运行时，都不会执行'append'方法。它只会在最后执行一次。如果您想阅读[文章1]（http://stage.learn.jquery.com/performance/append-outside-loop/），[文章2]（http://www.learningjquery.com）/2009/03/43439-原因使用的，追加，正确） –

在jQuery中使用for循环创建div，并为每个div分配ID

回答

相关问题