Question

问题：如果所有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>

我遇到的问题是，我选择＆＃34;过滤器＃1＆＃34;从菜单中。所有不具有.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');
            }
        });
    }

  });
}

我非常感谢任何建议。

Answer 1

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

将.resources-files-container元素列表过滤为那些没有可见li元素的元素，然后隐藏该过滤集。

http://jsfiddle.net/n403agxn/

Answer 2

如果我理解正确，您想检查div li内的所有.resources-files-container是否都没有.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();
    }
});

Answer 3

如果更改了选择，还包括一个用于切换可见性的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

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

如果孩子被隐藏，如何隐藏父母？

3 个答案: