如何一次管理所有ID？

问题描述

displayHex = () => {
  const IDcaller = document.getElementClassName("rectangleWrapper");
  setInterval(() => {
    for (let i = 0; i < IDcaller; i++) {
      console.log(IDcaller.id);
    }
  },1000);
  displayHex();
}

<div class="parentClass" id="rectangleWrapper">
  <div class="color" id="blue">
</div>
  #5591CE

这是我在文件夹中的HTML和js文件的示例代码。 指令是“当页面加载时，console.log记录消息“这里是矩形ID”，然后console.log记录所有矩形的ID，一次一次。”

解决方法

1. IDcaller [i] .id可能更有用
2. 拼写错误的getElementClassName。是getElementsByClassName
3. 您需要包装的子项，因此您确实需要document.querySelectorAll

也许是这个

displayHex = () => {
  const IDs = [...document.querySelectorAll("#rectangleWrapper .color")]
    .map(caller => caller.id); // get the IDs
  let cnt = 0;
  let tId = setInterval(() => { // save the interval variable
    if (cnt < IDs.length) {
      console.log(IDs[cnt]);
      cnt++;
    }
    else  clearInterval(tId); // stop the interval  
  },1000);
};
displayHex()

#blue { background-color: #5591CE; }
#red { background-color: #FF91CE; }
#green { background-color: #11FF11; }

<div id="rectangleWrapper">
  <div id="blue" class="color">Blue</div>
  <div id="red" class="color">Red</div>
  <div id="green" class="color">Green</div>
</div>