用jquery附加多個div，每個div都有其唯一的ID
[英]appending with jquery multiple div and each div has its unque ID
問題描述
如何附加多個ID以顯示不同的框。 box2，box3和box4。 我試圖使用for循環在ID的wird框的末尾添加升序數字。 感謝您的幫助。
$("#go").click(function(){ $("#boxContainer").append("<div id='box1'></div>"); });
#box1 { width: 100px; height: 100px; background-color: blue; } #box2 { width: 100px; height: 100px; background-color: grey; } #box3 { width: 100px; height: 100px; background-color: orange; } #box4 { width: 100px; height: 100px; background-color: green; }
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <button id="go">click</button> <div id="boxContainer"> </div> </body> </html>
2 個解決方案
解決方案1
1 2016-01-17 03:24:16
您可以根據#boxContainer元素#boxContainer元素的數量來設置id 。
使用.children()方法獲取直接子元素，然后訪問length屬性以獲取jQuery對象中元素的數量。
從jQuery 1.8開始，您可以使用以下語法創建元素：
$("#go").click(function() {
var id = 'box' + ($("#boxContainer").children().length + 1);
$("#boxContainer").append($("<div />", { id: id }));
});
或者，您也可以使用以下內容：
$("#go").click(function() {
var id = 'box' + ($("#boxContainer").children().length + 1);
$("#boxContainer").append('<div id="' + id + '"></div>');
});
更新的示例：
$("#go").click(function() { var id = 'box' + ($("#boxContainer").children().length + 1); $("#boxContainer").append($("<div />", { id: id })); });
#box1 { width: 100px; height: 100px; background-color: blue; } #box2 { width: 100px; height: 100px; background-color: grey; } #box3 { width: 100px; height: 100px; background-color: orange; } #box4 { width: 100px; height: 100px; background-color: green; }
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <button id="go">click</button> <div id="boxContainer"> </div>
解決方案2
0 2016-01-17 03:25:11
您可以添加一個簡單的for循環，在這種情況下將為0-9。
$("#go").click(function(){
for (i = 0; i < 10; i++) {
$("#boxContainer").append("<div id='box'" + i + "></div>");
}
});
使用jQuery追加div，每個div都有不同的ID
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.