gpt4 book ai didi

javascript - 使用jquery附加多个div并且每个div都有其唯一的ID

转载 作者:行者123 更新时间:2023-12-03 07:54:59 25 4
gpt4 key购买 nike

如何附加多个 ID 以显示不同的框。框 2、框 3 和框 4。我试图使用 for 循环在 Id 接线盒的末尾添加升序数字。感谢您的帮助。

$("#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>

最佳答案

您可以根据#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>

关于javascript - 使用jquery附加多个div并且每个div都有其唯一的ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34834751/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com