Question

如何附加多个ID来显示不同的框。 box2，box3和box4。我试图使用for循环在Id的wird框的末尾添加升序数字。谢谢你的帮忙。

＆＃13;

$("#go").click(function(){

		$("#boxContainer").append("<div id='box1'></div>");
	

});

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

您可以根据id元素中的子元素数量设置#boxContainer。

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

Answer 2

你可以添加一个简单的for循环，在这种情况下将是0-9。

$("#go").click(function(){
     for (i = 0; i < 10; i++) {


    $("#boxContainer").append("<div id='box'" + i + "></div>");
}

});

附加jquery多个div，每个div都有其unque ID

2 个答案: