javascript - 如果所有子 div 都被隐藏，如何隐藏父 div？

Question

我正在像这样动态创建 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。

标签： javascripthtmlcss

Answer 1

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

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