Javascript jQuery实时筛选列表父项和子项

我被困在这个问题上；我有一个输入字段，希望过滤结果。下面是我目前正在使用的函数

$（'input[type=“text”]）.keyup（函数（）{
var=这个，
$allListElements=$（'ul.bare-list>li'）；
var$matchingListElements=$allListElements.filter（函数（i，li）{
var listItemText=$（li）.text（）.toUpperCase（），
searchText=that.value.toUpperCase（）；
返回~listItemText.indexOf（searchText）；
});
$allListElements.hide（）；
$matchingListElements.show（）；
});

A.

项目1
项目2
项目3

B

项目1
项目2
项目3

通过查看您的函数，我假设过滤已经完成，您可以在子对象中看到结果。让我们以您的搜索“a”为例，HTML中的结果如下：

<div class='parent'>
  <div class='child1'> abcd </div>
  <div class='child2'> aef </div>
  <div class='child3' style='display: none'> bcd </div>
</div>


$（'input[type=“text”]）.keyup（函数（）{
var=这个，
$allListElements=$（'ul.bare-list>li'）；
var$matchingListElements=$allListElements.filter（函数（i，li）{
var listItemText=$（li）.text（）.toUpperCase（），
searchText=that.value.toUpperCase（）；
返回~listItemText.indexOf（searchText）；
});
$allListElements.hide（）；
$matchingListElements.show（）；
$（'ul.bare list'）。每个（函数（）{
if（$（this）.find（'>li'）.length>0）
$（this.show（）；
其他的
$（this.hide（）；
});
});

A.

项目1
项目2
项目3

B

项目1
项目2
项目3

您还需要两行：

$allListElements.parents('.brands-letter').hide();
$matchingListElements.parents('.brands-letter').show();

parents（）
方法将查找隐藏或显示元素的匹配父元素

演示：


$（'input[type=“text”]）.keyup（函数（）{
var=这个，
$allListElements=$（'ul.bare-list>li'）；
var$matchingListElements=$allListElements.filter（函数（i，li）{
var listItemText=$（li）.text（）.toUpperCase（），
searchText=that.value.toUpperCase（）；
返回~listItemText.indexOf（searchText）；
});
$allListElements.hide（）；
$matchingListElements.show（）；
//加上这个
$allListElements.parents（'.brands letter'）.hide（）；
$matchingliselements.parents（'.brands letter'）.show（）；
});

A.

项目0
项目2
项目3

B

项目1
项目2
项目4

这里首先使用JQ明确隐藏一个d1（类字母-a）子元素（类品牌项）

// here expilicitly hide all letter-a list item
const $brandItems = $('.letter-a').find('.brand-item');
$($brandItems[0]).hide();
$($brandItems[1]).hide();
$($brandItems[2]).hide();

在这里检查每个裸列表子元素的display none，如果所有子元素都有display none，则隐藏裸列表类的父元素的父元素

// Below code fulfil your requirement
const $bareLists = $('.bare-list');
$bareLists.each( (i, bareList) => {
    let hideFlag = true;
    const $brandItems = $(bareList).children();
    $brandItems.each( (j, brandItem) => {
        /* here checking for each child for display as none. if any child 
         does not has display as a none then it set hideFlag as a false.*/
        if ($(brandItem).css('display') !== 'none') {
            hideFlag = false;
        }
    });
    if (hideFlag) {
        let $parent = $(bareList).parent().parent();
        $parent.hide();
    }
});

// Below code fulfil your requirement
const $bareLists = $('.bare-list');
$bareLists.each( (i, bareList) => {
    let hideFlag = true;
    const $brandItems = $(bareList).children();
    $brandItems.each( (j, brandItem) => {
        /* here checking for each child for display as none. if any child 
         does not has display as a none then it set hideFlag as a false.*/
        if ($(brandItem).css('display') !== 'none') {
            hideFlag = false;
        }
    });
    if (hideFlag) {
        let $parent = $(bareList).parent().parent();
        $parent.hide();
    }
});