如果隐藏所有子div，如何隐藏父div？ [英] How to hide the parent div if all its child div are hidden?

问题描述

我有这样的动态创建div ..

I am having dynamic created div's like this..

<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>

我正在使用此脚本过滤结果...

I am using this script to filter results...

$(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。

This is working perfectly, what I want to achieve is that suppose the search value does not match in any of child of first div, then it should hide the parent div as well i.e. first div.

推荐答案

循环通过父母并检查是否隐藏所有孩子：

Loop trough the parents and check whether all children are hidden:

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

这篇关于如果隐藏所有子div，如何隐藏父div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！