如果隐藏了子对象，如何隐藏父对象

How to hide parent if children are hidden?

本文关键字：对象 隐藏 何隐藏 如果      更新时间：2023-09-26

问题：如果包含在父div中的列表中的所有子div都被隐藏，那么我需要在jQuery中找到一种方法来隐藏父div。

上下文：我正在开发一个允许管理员上传PDF的员工门户网站。当他们上传PDF时，他们可以将其附加到一个类别，也可以向其中添加标记。标记的目的是用于内联过滤功能，只有当他们从菜单中选择特定标记时，才会显示与该标记关联的文件。我的标记的一个简化示例：

<!-- Filtering Menu -->
<ul class="resource-filters">
    <li class="all">All</li>
    <li class="filter-example">Filter #1</li>
    <li class="filter-example">Filter #2</li>
    <li class="filter-example">Filter #3</li>
</ul>
<!-- Category #1 -->
<div class="resources-files-container">
    <h3>Category #1</h3>
    <ul class="attachment-list">
        <li class="filter-example-1">
            <a href="#">PDF Example #1</a>
        </li>
        <li class="filter-example-3">
            <a href="#">PDF Example #3</a>
        </li>
    </ul>
</div>  
<!-- Category #2 -->
<div class="resources-files-container">
    <h3>Category #2</h3>
    <ul class="attachment-list">
        <li class="filter-example-2 hidden">
            <a href="#">PDF Example #2</a>
        </li>
        <li class="filter-example-2 hidden">
            <a href="#">PDF Example #2</a>
        </li>
    </ul>
</div>

我遇到的问题是，假设我从菜单中选择"过滤器#1"。所有不具有.filter-example-1类的列表项都将设置为display: none（隐藏类）。在上面的示例标记中，这意味着类别#2现在没有要显示的项。我希望隐藏.resources-files-container的整个div（直到他们选择另一个合适的过滤器）。

我已经尝试解决这个问题几个小时了，并进行了大量搜索（我找到了一些符合我的部分标准的解决方案，但不是这个特定的案例）。除了这个特殊的部分，我已经弄清楚了整个应用程序。下面的jQuery与我遇到的这个特定问题并不特别相关，只是为了给你一些上下文：

// only run if we're in the portal
if ($("#portal-container").length) { 
  // get the unique list of classnames
  var classes = {};
  $('.attachment-list li').each(function() {
      $($(this).attr('class').split(' ')).each(function() { 
          if (this !== '') {
              classes[this] = this;
          }    
      });
  });

  //build the list items
  class_list = '';
  for (class_name in classes) {
      class_list += '<li class="'+class_name+'">'+class_name+'</li>';
  };

  // append the resulting list to the page
  $(class_list).appendTo('#resource-filter ul');

  // sorting functionality
  $('#portal-page').on('click', '#resource-filter li', function() {
    // set the current filter
    var filterVal = $(this).attr('class');
    // add current state to filter button
    $('#resource-filter li.current').removeClass('current');
    $(this).addClass('current');
    // filtering function
    if(filterVal == 'filter-all') {
        $('.attachment-list li.hidden').fadeIn('slow').removeClass('hidden');
    } else {
        $('.attachment-list li').each(function() {
            if(!$(this).hasClass(filterVal)) {
                $(this).fadeOut('normal').addClass('hidden');
            } else {
                $(this).fadeIn('slow').removeClass('hidden');
            }
        });
    }
  });
}

我非常感谢你的建议。

$(".resources-files-container")
    .filter(function(){
        return $(this).find("li:visible").length == 0;
    })
    .hide();

将.resources-files-container元素的列表筛选为仅具有不可见li元素的列表，然后隐藏该筛选集。

http://jsfiddle.net/n403agxn/

如果选择发生更改，还包括一个else来切换回可见性：

function toggleContainersByChildren() {
    $('.resources-files-container').each(function () {
        if ($(this).find('li:visible').length === 0) { // note the three = signs
            $(this).hide(); //hides the container if no children are visible
        } else {
            $(this).show(); //shows it again if the children are turned back on
        }
    });
}
toggleContainersByChildren(); //call this function to check your containers for visible children every time the filter is changed

编辑：提请注意===等号…

如果我理解正确，您需要检查div .resources-files-container中的所有li是否都没有.filter-example-1类。。。

所以，它应该是这样的：

//Select all div with this class, and iterate through them
$('.resources-files-container').each(function() {
    //Checks if the number of li's with the specified class inside this div is "0"
    if($(this).find('li.filter-example-1').length == 0) {
        //Hides the div, because there's no visible li in it.
        $(this).hide();
    }
});
相关文章：