jquery - 如何使用 jQuery 隐藏其子 ul-li 元素全部隐藏的父 li-元素？

Question

我有一组嵌套的 ul，如下所示:

<ul id="educationList">
    <li class="category"><p>Media production</p>
       <ul>
          <li class="education" style="display: block;">
             <a href="#">Real time 3D animation</a>
          </li>
          <li class="education" style="display: block;">
             <a href="#">Filming with Steadicam</a>
          </li>
          <li class="education" style="display: block;">
             <a href="#">Sound Effects</a>
          </li>
       </ul>
    </li>
</ul>

顶部 ul (educationList) 包含一个类别列表，每个类别都有一个子列表 (ul)，其中包含在此类别下排序的教育。经典的嵌套列表结构。在上面的示例代码中，我只有一个类别 - 在实际代码中有很多类别。

我有一个 jQuery 过滤函数，可以显示/隐藏具有“education”类(子列表元素)的 li 元素。有时，此过滤功能会隐藏所有子列表元素，因此 HTML 如下所示:

<ul id="educationList">
    <li class="category"><p>Media production</p>
       <ul>
          <li class="education" style="display: none;">
             <a href="#">Real time 3D animation</a>
          </li>
          <li class="education" style="display: none;">
             <a href="#">Filming with Steadicam</a>
          </li>
          <li class="education" style="display: none;">
             <a href="#">Sound Effects</a>
          </li>
       </ul>
    </li>
</ul>

不同之处在于，所有子列表元素现在都具有内联样式display: none。突然之间，我对“类别”类别的家长李没有真正的用处，因为这个类别下没有教育。

现在，我正在寻找一种智能方法来查找所有没有可见 child 教育列表项的类别列表项，并简单地隐藏类别列表项。每次进行任何过滤时，我都必须运行此函数，因为过滤将影响 child 教育列表项目 - 一些可见的项目将被隐藏，一些隐藏的项目将再次变得可见。

此外 - 我将拥有很多元素，因此如果代码不太占用资源，这将是一个优势。不过，现在还不是挑剔的时候。任何解决方案都可以，稍后我将不得不努力优化。

提前致谢!/托马斯·卡恩

Answer 1

这应该很简单:

$('li.category:not(:has(li:visible))').hide();

实例:http://jsfiddle.net/wTKEQ/

如果按原样运行，则该类别将被隐藏。如果将一个或多个子项更改为 display:block，则不会发生任何情况。