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 。突然之间，由于在这一类别下没有任何教育，我没有真正使用“类别”类的父母。

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

另外 - 我会有很多元素，所以如果代码不是太耗资源，这是一个优势。不过，现在不是挑剔的时候。任何解决方案都可以，我将不得不在以后进行优化。

提前致谢！ / Thomas Kahn

Answer 1

这应该简单如下：

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

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

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

Answer 2

这是一个简单方便的jQuery解决方案，它不会完全忽略资源的使用：

$('li.category').each(function() {
  var $li = $(this);
  if(!$li.find('li:visible').length) {
    $li.hide();
  }
});

如果您需要性能优化，则可以改为执行此操作，而不会产生.each的开销：

var categories = $('li.category');
for(var i=0,category;category = categories.eq(i);i++) {
  if(!category.find('li:visible').length) {
    category.hide();
  }
}

编辑：已修复优化版本中的错误

Answer 3

$("li.category").each(function(){
   if($(this).find("li:visible").size() == 0)$(this).hide();
});

Answer 4

$("li.category").each(function(){
if($(this).find("li.education").css("display")=="none")
{
$(this).hide();
}
});

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

4 个答案: