如何使用 jquery 定位超出特定级别的所有嵌套列表项？答案

【问题标题】：How to target all nested list items beyond a specific level using jquery?如何使用 jquery 定位超出特定级别的所有嵌套列表项？
【发布时间】：2017-06-22 15:19:25
【问题描述】：

我有一个清单

<ul>
 <li>
  <ul>
   <li>
    <ul>
     <li> <-- start targeting list items here including children -->
      <ul>
       <li> <-- included -->
       </li>
      </ul>
     </li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

我想定位从第二个或第三个嵌套列表开始的所有列表项，包括之后使用 jquery 的所有子项

【问题讨论】：

让自己轻松一些，并为您的标记添加一些类

标签： javascript jquery html jquery-selectors html-lists

【解决方案1】：

var selector = $('ul > li > ul > li > ul li');

【讨论】：

哈哈。您的解决方案非常简单且有限。如果列表的深度增加，你应该写长字符串来选择项目。
@Mohammad 是的，我同意这很简单，并且仅限于 op 的确切问题。但不代表不值得。

【解决方案2】：

第三个li 有三个ul 父母。您需要使用.filter() 过滤li，并在其中检查每个li 的ul 父级的length 以过滤嵌套的li。

$("ul:first li").filter(function(){
    return $(this).parents("ul").length > 2 ? true : false;
}).css("color", "red");

$("ul:first li").filter(function(){
  return $(this).parents("ul").length > 2 ? true : false;
}).css("color", "red");

<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
      <ul>
       <li>Fourth</li>
      </ul>
     </li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

【讨论】：