Question

我有一个无序列表，它会自动生成..

<div class="main">
   <ul class="list">
      <li class="section">
         Level 1
         <ul class="list">  
            <li class="section">
               Level 2
               <ul class="list">
                  <li class="section item">
                     Level 3
                  </li>
               </ul>
             </li>
          </ul>
      </li>
   </ul>
</div>

我如何只定位该'item'类以便显示它并隐藏前面的li？

我希望能够只显示

<div class="main">
   <ul class="list">
      <li class="section item">
         Level 3
      </li>
   </ul>
</div>

提前致谢。

Answer 1

您要求隐藏不能直接完成的文本节点，因此最简单的起点是将这些文本节点放在自己的元素中，因此只能隐藏包含文本的元素

<div class="main">
   <ul class="list">
      <li class="section">
          <span class="label">Level 1</span>
         <ul class="list">  
            <li class="section">
                <span class="label">Level 2</span>
               <ul class="list">
                  <li class="section item">
                     <span class="label">Level 3</span>
                  </li>
               </ul>
             </li>
          </ul>
      </li>
   </ul>
</div>

然后你可以使用：

 $('.item').parents().children('.label').hide();

parents()遍历DOM，然后使用children()将仅定位直接后代（而不是任何其他更深层嵌套的后代）

此解决方案保持完整的树结构。操纵树结构本身也可以根据需要进行

的 DEMO

如何使用jquery在无序列表中仅显示第3级？

1 个答案: