如果所有子 div 都被隐藏，如何隐藏父 div？答案

【问题标题】：How to hide the parent div if all its child div are hidden?如果所有子 div 都被隐藏，如何隐藏父 div？
【发布时间】：2018-08-14 07:18:50
【问题描述】：

我正在像这样动态创建 div..

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

我正在使用这个脚本来过滤结果...

$(document).ready(function(){
  $("#search").on("keyup", function()
  {
    var value = $(this).val().toLowerCase();
    $(".child").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
});

这工作得很好，我想要实现的是假设搜索值在第一个 div 的任何子项中都不匹配，那么它应该也隐藏父 div，即第一个 div。

【问题讨论】：

你为什么使用filter 却没有返回任何东西并且它工作正常？

标签： javascript html css

【解决方案1】：

循环遍历父母并检查是否所有孩子都被隐藏：

$('.parent').show();
$('.parent').each(function() {
  if (!$(this).find('.child:visible').length) {
    $(this).hide();
  } else {
    $(this).show();
  }
})

【讨论】：

它的工作文件，但是当我更改#search 中的值时，刚刚隐藏的父 div 仅被隐藏...如何显示它们
是的，正确的。我用 else 子句完成了上面的代码，谢谢。
我再次更正了，谢谢。似乎它没有循环通过隐藏的父母。因此，在循环它们之前必须使它们全部可见。
您的代码有效..但它减慢了我的页面速度...键入时的搜索选项在使用您的代码时滞后..请帮我优化它
您需要使用debounce 进行输入。请在此处找到示例：stackoverflow.com/questions/51837825/…

【解决方案2】：

试试这个

$(document).ready(function(){
    $("#search").on("keyup", function()
    {
      var value = $(this).val().toLowerCase();
      $(".child").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
      });
      //here is the code to hide
      $(".parent").each(function() {
        if($(this).find('.child:visible').length===0)
            $(this).hide();
        else 
            $(this).show();
        });
    });
  });

【讨论】：

它的工作文件，但是当我更改#search 中的值时，刚刚隐藏的父 div 仅被隐藏...如何显示它们
在else部分再次显示。更新代码。

【解决方案3】：

除了你可以在其他地方使用toggle_visibility()之外，这个和上面类似

function toggle_visibility() {
    if (!$(this).find('.child:visible').length) {
        $(this).hide();
    }
    else {
        $(this).show();
   }
}

$('.parent').each(toggle_visibility)

【讨论】：