使用jQuery選擇列表項目，而不需要定位子列表項目

Question

我試圖用jQuery來定位特定的頂級列表項目。然而，其中一些列表項還包括他們自己的嵌套列表，我想忽略它們。

我在這裏發現了一個stackoverflow的問題Target first level <li>s and not the nested <li>s 關於這個話題，但在頒佈解決方案後，我仍然遇到同樣的問題。

HTML：

<div> 
    <ul> 
    <li data-level="1"> 
     Upper List Item 
     <ul> 
     <li>Sub list item</li> 
     </ul> 
    </li> 
    <li data-level="1">List item 2</li> 
    </ul> 
</div> 

的Javascript：

$(document).ready(function() { 
    $("div > ul > li[data-level=1]").each(function(index){ 
    console.log(index + ":" + $(this).text()); 
    }); 
}); 

https://jsfiddle.net/o4mw0gd8/3/

Answer 1

問題是，您正在抓取頂級<li>的所有文本。

考慮到子級<li>的是一個頂級<li>內，那麼這些文本是頂級<li>內的太...

解決方案1：

您應該將文字放在<span>標籤內，並且在頂級<li>的<span>/s內找到文本要容易得多！

解決方案2：

之前抓住你<li>文本的刪除它裏面的所有<ul>元素，所以你將只能得到頂層<li>文本的

JS ：

$("ul > li[data-level=1]").each(function(index) { 
    var current = $(this).clone(); 
    current.find('ul').remove(); 
    console.log(index + ":" + current.text().trim()); 
}); 

Working Fiddle

Answer 2

一些技巧。

$("div > ul > li[data-level=1]").each(function(index){ 
    console.log(this.childNodes.item(0).textContent); 
}); 

Answer 3

由於阿拉米爾說 - 你走的是整個內部的內容，其中包括嵌套ul>李：

"Upper List Item 
    <ul> 
    <li>Sub list item</li> 
    </ul>" 

卜你可以用子解決這樣的：

$(function(){ 
    $("li[data-level=1]").each(function(){ 
    var txt=this.innerHTML;//the whole text including the nested ul>li 
     if(txt.indexOf("<")>-1)txt=txt.substring(txt.indexOf("<"),0);//cut from first tag if needed 
    console.info(txt);//needed txt 
    }); 
}); 

Answer 4

你可以

$(document).ready(function() { 
 
    $("ul > li[data-level=1]").each(function(index) { 
 
    $(this).not("ul").css("color", "red"); 
 
    }); 
 
});

ul li { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li data-level="1"> 
 
    Upper List Item 
 
    <ul> 
 
     <li>Sub list item</li> 
 
    </ul> 
 
    </li> 
 
    <li data-level="1">List item 2</li> 
 
</ul>

：排除子 ul使用jQuery .not()從選擇元素