Javascript 为java脚本DOM元素中附加子元素提供唯一id

我只是在java脚本中创建了多个div和append，但我还需要为所有append子级提供唯一的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>

对于（变量i=0；i<5；i++）
$（“.first”）。追加（“”）；
对于（变量i=0；i<5；i++）
$（“.2”）。追加（“”）；
对于（变量i=0；i<5；i++）
$（“.third”）。追加（“”）；

---

或者有更好的方法来实现这一点吗？

您可以使用HTML DOM命令.querySelectorAll（）返回与给定属性匹配的子级列表。例如，如果给父div一个ID:ID=“mainDiv”，并且所有子div都是同一个class:class=“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();

---

您将以何种方式更改颜色？您可以使用类似于

$（'.first div'）.eq（4）

的方法来选择

中的第五个div。first

是的，它可以工作，Thanks bear in mind index 0指的是列表中的第一个元素。