用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.