不隐藏父项的jQuery筛选列表

我有这样一份清单：

<ul>
  <li class="folder">Foder A</li>
  <ul>
    <li>Item 1A</li>
    <li>Item 2A</li>
    <li>Item 3A</li>     
  </ul>
  <li class="folder">Foder B</li>
  <ul>
    <li class="folder">Sub-Foder C</li>
    <ul>
      <li>Item 1C</li>
    </ul>
    <li>Item 1B</li>
    <li>Item 2B</li>
    <li>Item 3B</li>     
  </ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

文件夹

项目1A
项目2A
第3A项

Foder B文件夹

子文件夹C

项目1C

项目1B
项目2B
第3B项

项目1
项目2
项目3

这个“搜索”脚本：

$（文档）.ready（函数（）{
$（“输入[type='search']”）。键控（函数（）{
var filter=$（this.val（）；
$（“ul li”）。每个（函数（）{
if（$（this.text（）.search）（新的RegExp（filter，“i”））<0）{
$（this.hide（）；
}
否则{
$（this.show（）；
}
});
});
});

但它正在过滤所有的

文件，当然甚至隐藏“文件夹”

如何继续显示包含搜索结果的家长
？
我对您的初始代码进行了一些修改，我想我现在得到了所需的用例。但首先让我们简单地看一下我改变了什么

我没有在每个
keyup
上迭代所有
li
元素，而是在文档准备就绪时使用
$（'ul li'）.toArray（）
来获取节点元素数组
最初，我们隐藏
keyup上的所有内容

如您所见，我使用了一种稍微不同的方法来过滤匹配的值。因为我的列表现在是一个数组，所以我正在使用
过滤器
（）函数，该函数将返回一个基于节点元素的新数组，这些节点元素与条件
条目.innerText.includes（值）
（）相匹配
之后，我迭代结果数组，并将
show（）
应用于每个条目，并且我还使用
parentsUntil（'.top-level'）
（我将类
顶级
添加到最顶层的
元素）来获取当前条目（与搜索匹配的条目）的祖先我通过使用
prev（…）
（）将这些祖先的前一个
li
元素作为目标。最后，我在这些元素上应用
show（…）
parentsUntil（…）
的确切定义如下：

获取当前匹配元素集中每个元素的祖先，直到但不包括选择器、DOM节点或jQuery对象匹配的元素


片段


$（文档）.ready（函数（）{
var list=$（'ul li'）.toArray（）；
$（“输入[type='search']”）。键控（函数（）{
$（'ul li'）.hide（）；
var值=$（this.val（）；
var result=list.filter（函数（条目）{
返回条目.innerText.includes（值）；
});
result.forEach（函数（条目）{
$（entry.show（）.parentsUntil（'.top-level'）.prev（'li'）.show（）；
});
});
});


文件夹

项目1A
项目2A
项目3A

Foder B文件夹

子文件夹C

项目1C

项目1B
项目2B
项目3B

项目1
项目2
项目3
您可以获取顶级ul元素的直接子元素，然后隐藏所有其他元素。
$(document).ready(function() {
$("input[type='search']").keyup(function() {
  var filter = $(this).val();
  $("ul li").each(function() {
    if ($(this).text().search(new RegExp(filter, "i")) < 0) {
      $(this).hide();
      }
    else {
      $(this).show();
      }
    });
  });
});