如何在<ul>中选择<li>

时间:2017-06-05 08:47:15

标签: javascript html

假设我有html结构

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

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

document.querySelectorAll("ul > li");

返回所有li个。

编辑:实际上这只是树的一小部分 我无法将结构修改为添加类或ID。我正在寻找获得第一层li s

列表的答案

7 个答案:

答案 0 :(得分:5)

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

:not(li) > * > li {}

只有在标记中没有额外元素时才会有效。

例如,它将失败:

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

一种较慢但更可靠的方法是获取所有列表项,然后筛选出具有列表项祖先的项。

&#13;
&#13;
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);
  }
}
&#13;
<ul>
  <li>
    <ul>
      <li>...
    </ul>
</ul>
&#13;
&#13;
&#13;

答案 1 :(得分: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>

答案 2 :(得分:1)

试试这个应该做的伎俩:

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

这也适用于你的情况:

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

答案 3 :(得分:0)

您可以向特定id添加li

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

然后使用:

选择它
var chosenOne = document.getElementById("someID");

答案 4 :(得分: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;
}

答案 5 :(得分:-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控制台的快照:

enter image description here

答案 6 :(得分:-2)

你可以得到父亲的直接孩子。在这种情况下,“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>