如何選擇 <li> 內 <ul>

Question

假設我有html結構

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

我不想得到li的全部。 正如我評論的那樣，我只想得到第一段李。 我該如何選擇它們？

document.querySelectorAll("ul > li");

返回所有li的。

編輯：實際上這只是樹的一小部分。
我無法將結構修改為添加類或ID。 我在尋找的答案，得到第一層的列表li小號

Answer 1

您需要選擇祖父母不是另一個列表項的所有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> 

Answer 2

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

Answer 3

試試這個它應該做的伎倆：

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

這也適用於你的情況：

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

Answer 4

您可以為該特定li添加id ：

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

然后選擇它：

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

Answer 5

你可以遍歷第一個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;
}

Answer 6

用途: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控制台的快照：

Answer 7

你可以得到父親的直接孩子。 在這種情況下，“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>