Question

在开始之前，这是Search for divs that contain specified text

的“第2部分”

嘿。我有一个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，它将删除包含def和ghi的div，尽管搜索匹配div（内部带有abcdefghi的div）。所以：如果没有匹配（例如，j），我将如何创建一个删除主div的搜索函数，并显示div中包含其他div的所有div，无论div有多少匹配。

提前致谢。

PS。如果有人知道更好的头衔，请随时改变它

Answer 1

不是过滤所有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();

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

1 个答案: