如何获取具有特定类名的节点的唯一直接子节点？

Question

如何获取具有特定类名的节点的唯一直接子元素？

示例

<div class="list-group">
  <div class="list-group-item">
    <div class="list-group"> <!--I have this-->
      <div class="list-group-item"> <!--And I want to reach this-->
        <div class="list-group">
          <div class="list-group-item"></div> <!--Not this-->
          <div class="list-group-item"></div>
        </div>
      </div>
      <div class="list-group-item"></div> <!--And get this-->
    </div>
  </div>
</div>

我有一个包含项和组的列表组，我想保持这种层次结构并获取列表组的直接列表组项。如何实现？

- Kreator

---

添加您当前的选择器。 - Maciej Sikora

这个问题可能已经在这个帖子中得到了解答，使用:scope伪类。更多信息请参见MDN。 - lochiwei

Answer 1

您没有提到是否使用任何JS框架，但是使用JQuery相对简单...只需使用children() 例如：$("#haveThis").children() 您还可以像这样过滤孩子：$("#haveThis").children("list-group-item") 文档：https://api.jquery.com/children/ 对于原生JS，我会这样做：

[].slice.call(document.getElementById("havethis").children).filter(el=>el.className==='list-group-item')

- Mirko Vukušić

---

编辑：我知道有JQuery的解决方案，但我不知道我可以像$(Node).children一样在var Node上使用JQuery函数。 - Kreator

如果你不需要兼容IE或Opera Mini，使用Array.from而不是[].slice.call是相当安全的。 - fodma1

Answer 2

在纯JS中（如果您不使用jQuery），element.children（其中element是您希望查询的父元素）将返回所有直接子节点的列表，然后您可以迭代该列表，查找node.className = "list-group-item";。我没有找到使用标准CSS选择器的方法，因此编码解决方案似乎是唯一的选择。

- allnodcoms

Answer 3

获取所有具有指定类名的元素：

var x = document.getElementsByClassName("list-group-item");

链接 https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByClassName

- digit

---

这将获取文档中具有该类的所有元素，因此并不能回答问题。 - allnodcoms

是的，这是真的，但你可以将其过滤掉。只需将 x[0] 放入即可。 - digit

但是 x[0] 只会获取第一个元素，无论它在 DOM 中的位置如何。 - allnodcoms