如何选择<ul>中的<li>？

Question

如何选择<ul>中的<li>？

3

Assume I have html structure as

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

我不想获取所有的li。正如我所评论的，我只想获取第一个段落中的li。如何选择它们？

document.querySelectorAll("ul > li");

返回所有的li元素。

编辑：实际上这只是树的一部分。
我不能改变结构以添加类或ID。我正在寻找一个答案来获取第一层li列表。

- mmu36478

在你的 li 标签中添加一些 class 或 id，例如 <li class="first-block-li"> ... </li> 然后使用 document.getElementByClass('first-block-li')。 - Nikita Goncharov

我不能修改结构，例如添加类或ID。还有其他要求吗？ - mmu36478

你会选择哪个 li？是第一个、最后一个还是其他的？ - Alexander

@Aotik - 不是重复。这取决于首先能够识别外部列表。 - Quentin

要获取第一个 ul，只需运行 document.querySelector('ul')。 - Aotik

显示剩余2条评论

7个回答

5

在jQuery中，您可以使用此选择器ul > li:not('ul > li > ul > li')：

$("ul > li:not('ul > li > ul > li')").css("background", "green");

ul > li {
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    First
    <ul>
      <li>
        Second
        <ul>
          <li>Third</li>
        </ul>
      </li>
      <li>Second</li>
      <li>Second</li>
      <li>Second</li>
    </ul>
  </li>
  <li>First</li>
  <li>First</li>
  <li>First</li>
</ul>

- Arg0n

1

尝试这个，它应该能解决问题：

$("ul > li").not("ul li ul li");

同时，这应该适用于您的情况：

$("ul").first().children("li");

- Oghli

0

您可以为该特定的 li 添加一个 id：

<li id="someID"></li>

然后使用以下方式进行选择：

var chosenOne = document.getElementById("someID");

- Carl Binalla

0

你可以遍历第一个 ul 的子元素，并寻找像下面这样的 li 元素。

function firstLis() {
  var firstUl = document.querySelector('ul');
  var list = [];
  for(var i = 0; i < firstUl.children.length; i++) {
    var element = firstUl.children[i];
    if(element.tagName === 'LI')
      list.push(element);
  }
  return list;
}

- Frederik Hansen

为什么 document.querySelector('ul') 不会返回嵌套的 ul？ - Arg0n

@Arg0n - 这就是为什么你需要在那行代码之后出现的代码。 - Quentin

document.querySelector 返回第一个找到的元素。 - Frederik Hansen

@FrederikHansen 我明白了，但是这样就不能在根目录下使用多个列表了。<ul><li></li></ul> <ul><li></li></ul>。 - Arg0n

@Arg0n 你说得对，这样是不行的。如果你想要将其扩展为适用于给定父元素中的所有 ul 元素，可以尝试使用 document.querySelectorAll('body > ul') 来获取所有的 ul 元素，然后在它们上面运行该函数。 - Frederik Hansen

-1

使用:scope

console.log(source.querySelectorAll("ul:scope > li"));

<ul id="source">
  <li>
    this
    <ul>
      <li>not this</li>
      <li>not this</li>
      <li>not this</li>
    </ul>
  </li>
  <li>
  this
  </li>
</ul>

来自Chrome控制台的快照：

- Val

你用什么浏览器？已在Chrome / Firefox中测试通过。 - Val

感谢您的反馈（来自已删除的评论）。目前我无法在IE中测试它，也许这不是一个非常兼容的答案，但它可以与Chrome / Firefox一起使用。希望它能帮到未来的某个人。 - Val

我不同意这个负评，但你可以把你的答案修改成适用于现代浏览器或者（特定的浏览器）的替代方案 :) 很好的答案。 - Val

-2

You can get the father's direct children. In this case, the "lis":

console.log(document.querySelector("ul").children)

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

- nidstang

1

这不会起作用，实际上它选择了内部的ul。 - Oghli

你是对的，但你可以从那些“uls”中选择“lis”。我不知道，但我认为这比其他答案更容易。 - nidstang

我们只需要第一层的“lis”，在你的情况下，内部的“ul”不会给我们正确的“lis”。 - Oghli

嗯，好的。可能是这样的：document.querySelector("ul").children？也许我没有理解你的意思。 - nidstang

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Quentin · Accepted Answer

您需要选择所有祖父不是另一个列表项的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>