Question

我目前正在使用for循环创建div。

问题是当我尝试为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;
}

Answer 1

你需要放置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 +'" />');
  }
});

Answer 2

所有提供的答案都可以胜任，但如果你想让它更快，你就可以这样做。另外，如果您希望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);
});

Answer 3

尝试：

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

Answer 4

将$（document）.ready从循环中取出来。

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

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

4 个答案: