javascript - 如何在中选择

Question

假设我的 html 结构为

ul
  li //this one
    ul
      li
      li
      li
  li //this one

我不想得到所有的 li。正如我评论的那样，我只想获得李的第一段。我该如何选择它们？

document.querySelectorAll("ul > li");

返回所有的 li。

编辑:实际上这只是树的一个片段。
我无法将结构修改为添加类或 ID。我正在寻找一个答案来获取第一层 lis

的列表

Answer 1

您需要选择祖 parent 不是另一个列表项的所有 li 项。

:not(li) > * > li {}

这仅在标记中没有额外元素时才有效。

例如它会失败:

<ul>
  <li>
    <div>
      <ul>
        <li>

一种较慢但更可靠的方法是获取所有列表项，然后过滤掉具有列表项祖先的项。

var lis = document.getElementsByTagName('li');
var lis_without_li_ancestors = [];
for (var i = 0; i < lis.length; i++) {
  var element = lis[i];
  if (!has_li_ancestor(element)) {
    lis_without_li_ancestors.push(element);
  }
}

console.log(lis_without_li_ancestors);

function has_li_ancestor(element) {
  var parent = element.parentNode;
  if (parent.tagName.toLowerCase() === "body") {
    return false;
  } else if (parent.tagName.toLowerCase() === "li") {
    return true;
  } else {
    return has_li_ancestor(parent);
  }
}

<ul>
  <li>
    <ul>
      <li>...
    </ul>
</ul>