在我开始之前,这是搜索包含指定文本的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
它将删除包含 def
和 ghi
的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();