如何定位两个 DOM 集合？

Question

我对 JS 很陌生，我正在尝试链接两个集合。我试图做到这一点，如果 HTML 元素是某种颜色，则将单击父 HTML 元素。如果有人可以提供任何建议，我们将不胜感激:)

const heart = document.querySelectorAll(".col > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)");
const faheart = document.querySelectorAll(".fa-heart");

faheart.forEach(function(y, i) {
  const m = y.getAttribute("color");

  heart.forEach(function(z, i) {

    if (m != "#E3170A") {
      setTimeout(() => {
        z.click();
      }, i * 1000)
    };
  });
});

我尝试了映射和使用吸气剂，我很新，所以不幸的是我什么也想不出来。我目前得到的是其中一个元素，仅记录了其他 24 次。

Answer 1

您不需要嵌套循环。检查颜色并访问父级：

document.querySelectorAll(".clickable").forEach(el => {
  el.addEventListener('click', () => { alert('Clicked'); });
});

const faheart = document.querySelectorAll(".fa-heart");

faheart.forEach(y => {
  const m = y.getAttribute("color");
  const z = y.parentNode;
  if (m != "#E3170A") {
    setTimeout(() => {
      z.click();
    }, 1000)
  }
});

<div class="col">
  <div>
    <div></div>
    <div>
      <div>
        <div>
          <div class="clickable">
            <div class="fa-heart" color="#E3170B"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>