解决方案1：

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>标记内，并且在顶级<span>内的<li> / 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

您可以使用jquery .not()排除选择中的子ul元素：

＆＃13;

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

＆＃13;

ul li {
  color: green;
}

＆＃13;

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

＆＃13;

Answer 4

正如Aramil所说 - 你采取了整个内在的内容，其中包括嵌套的 ul＆gt; li ：

 "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
   });
});

使用jQuery选择列表项而不定位子列表项

4 个答案:

解决方案1：

解决方案2：