为java脚本DOM元素中的子元素提供唯一的id

Question

我只需要在java脚本中创建多个div并进行追加，但我还需要为所有追加的子级提供唯一的id，这样以后我就可以更改任何div的颜色。

我的观点

<div class="main" style=" background-color: white">
<div class="first">
<div class="box"></div>
<div class="box1"></div>
</div>
<div class="2nd">
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="third">
<div class="box4"></div>
<div class="box5"></div>
</div>  
</div> 
<script>
for(var i = 0; i< 5; i++)
$(".first").append("<div class='box'></div><div class='box1'></div>");
for(var i = 0; i< 5; i++)
$(".2nd").append("<div class='box2'></div><div class='box3'></div>"); 
for(var i = 0; i< 5; i++)
$(".third").append("<div class='box4'></div><div class='box5'></div>"); 
</script>

或者有什么更好的方法可以做到这一点？

Answer 1

您可以使用HTML DOM命令.querySelectorAll((返回与给定属性匹配的子级列表。例如，如果您给父div一个ID:ID="mainDiv"；，并且所有的子划分相同的类：class＝"0"；childDiv"；，然后可以执行以下操作：

var mainDiv = document.getElementById("mainDiv");
var childrenDivs = mainDiv.querySelectorAll(".childDiv");
// childrenDivs is now a list containing all of your sections which you can reference using an index
// Eg...
childrenDivs[0].append();