在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

回答

相關問題