javascript - 如何将 HTML 类的所有对象拉入数组（JS）

Question

就上下文而言，我正在开展一个项目，该项目涉及带有一些稍微重叠的卡片的布局。我希望它们按降序堆叠，因此列出的第一张卡片的 z-index 最高，最后一张列出的卡片的 z-index 最低。当一张卡片悬停在上面时，它应该被带到前面。

我想使用 JS 循环来分配 z-indexes，以便可以更轻松地更新卡片列表，但我很难弄清楚如何将它们拉入数组以进行循环。

HTML基本上是：

<a class="card">
  <div class="card-text">
    <p class="info-line-1">Line 1</p>
    <p class="info-line-2">Line 2</p>
    <etc>etc</etc>
  </div>
</a>

我尝试使用 Array.from() 无济于事，并且涉及到 cardArray.push(card) 等各种混乱，但这也不起作用。

我确信这是一个非常简单的解决方案，但我对 JavaScript 完全陌生，我真的很感激能得到一些帮助。谢谢！

标签： javascript

Answer 1

您可以使用...

var elements = document.getElementsByClassName("some class");
for (var i = 0; i <= elements.length; i++) {
    elements[i].style.zIndex = "7";
}

这应该可以解决问题。