Question

如何才能获得Node的特定类名的直接孩子？

实施例

<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>

我有一个包含项目和组的列表组，我希望保留该层次结构并获得列表组的唯一直接列表组项目。

我该怎么办？

Answer 1

你没有提到你是否使用任何JS框架，但是使用JQuery它很简单......只需使用children()

示例$("#haveThis").children()

您还可以过滤以下内容：$("#haveThis").children("list-group-item")

docs：https://api.jquery.com/children/

对于vanilla JS我会这样做：

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

Answer 2

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

Answer 3

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

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

链接https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

如何才能获得Node的特定类名的直接孩子？

3 个答案: