Question

正如标题所示，我想构建一个隐藏元素的过滤器。如果所有孩子都被隐藏了，那么paretn还应该设置为不显示任何内容，因为我无法弄清楚该如何处理。我没有运气尝试过下面的方法。

function filter(e){
  search = e.value.toLowerCase();
  console.log(e.value)
  document.querySelectorAll('.kb-item').forEach(function(row){
     text = row.innerText.toLowerCase();
     if(text.match(search)){
        row.style.display="block"
     } else {
        row.style.display="none"
     }

      // need to count hidden items and if all instances of .kb-items are hidden, then hide .kb-item
     var countHidden = document.querySelectorAll(".kb-item[style='display: none;']").length;
     var children = document.querySelectorAll(".kb-items").length;

     if(countHidden > children){
       row.style.display="none"
     }

      console.log(countHidden);
  })
}

HTML

<div class="kb-items">
  <h1>fruits</h1>
  <div class="kb-item">apple</div>
  <div class="kb-item">banana</div>
</div>

<div class="kb-items">
  <h1>vegetables</h1>
  <div class="kb-item">lettuce</div>
  <div class="kb-item">onion</div>
  <div class="kb-item">carrot</div>
</div>

Answer 1

您需要在迭代孩子之后而不是在做父母时做事。

为每个父母（而不是整个.kb-item元素）获取孩子。
用display: none样式比较子代的长度和子代的长度。

function filter(e) {
  // ...
  var parents = document.querySelectorAll(".kb-items");
  parents.forEach(parent => {
    if (parent.querySelectorAll(".kb-item").length == parent.querySelectorAll(".kb-item[style='display: none;']").length) {
      parent.style.display = "none"
    } else {
      parent.style.display = "block"
    }
  })

完整代码段：

function filter(e) {
  search = e.value.toLowerCase();
  console.log(e.value)
  document.querySelectorAll('.kb-item').forEach(function(row) {
    text = row.innerText.toLowerCase();
    if (text.match(search)) {
      row.style.display = "block"
    } else {
      row.style.display = "none"
    }

  })

  var parents = document.querySelectorAll(".kb-items");
  parents.forEach(parent => {
    if (parent.querySelectorAll(".kb-item").length == parent.querySelectorAll(".kb-item[style='display: none;']").length) {
      parent.style.display = "none"
    } else {
      parent.style.display = "block"
    }
  })


}

<input type="text" onkeyup="filter(this)" />

<div class="kb-items">
  <h1>fruits</h1>
  <div class="kb-item">apple</div>
  <div class="kb-item">banana</div>
</div>

<div class="kb-items">
  <h1>vegetables</h1>
  <div class="kb-item">lettuce</div>
  <div class="kb-item">onion</div>
  <div class="kb-item">carrot</div>
</div>

Answer 2

可能是您可以在按键上触发两个功能。一个人将检测一组中的元素状态，该状态将检测所有元素是否被隐藏。我们可以编辑以下代码以提高dom效率。

希望这是您期望的结果小提琴链接：https://jsfiddle.net/binaryslate/2z1ptnao/1/

        <input type="text" onkeyup="filter(this);detectParent();"/>

        function detectParent()
        {
            var collectionref=document.querySelectorAll(".kb-items");
            collectionref.forEach(group=>{
            var itemcollection=group.getElementsByClassName("kb-item");
            var hidecounter=0;
            for(var j=0;j<itemcollection.length;j++)
            {

                if(itemcollection[j].style.display==='none')
                {
                    hidecounter++;
                }
            }
            if(hidecounter===itemcollection.length)
            {
                group.style.display="none";
            }else{
                group.style.display="block";
            }

            });
        }

使用vanilla JS检测是否所有孩子都被隐藏并隐藏父div

2 个答案: