在没有匹配的后代元素时隐藏父元素



在我开始之前,这是搜索包含指定文本的div的一种"第2部分"

嘿。我得到了一个div 列表,每个div 都有几个div(样式),它看起来像这样:

<body>
<div class='divlist'>
<div>
    <div>abc</div><div>def</div><div>ghi</div>
</div>
</div>
</body>

body标签中,我还进行了搜索(<input type='text' id='search' />

和我的jquery:

$('#search').on('input', function(){
    var text = $(this).val();
    $('.divlist div').show();    
    $('.divlist div:not(:contains(' + text + '))').hide();
});

现在,如果我搜索abc它将删除包含 defghi 的div ,尽管搜索与div(内部带有 abcdefghi 的那个)匹配。所以:我将如何创建一个搜索函数,如果没有任何匹配项(例如,j),则删除主div,并显示包含其他div 的div 内的所有div,无论匹配多少个div。

提前谢谢。

如果有人知道更好的标题,请随时更改它

不要过滤所有div元素,而是过滤.divlist元素:

$('.divlist:not(:contains(' + text + '))').hide();

或者使用子选择器对他们的直系div子项:

$('.divlist > div:not(:contains(' + text + '))').hide();

您还可以使用.filter()比昂贵的:not(:contains())选择器更有效的方法:

$('.divlist > div').hide().filter(function() {
    return $(this).text().indexOf(text) > -1;   
}).show();

最新更新