我认为我正在寻找的功能称为“实时过滤器”,我正在尝试过滤输出的数据库条目,其中每个条目具有以下结构:
<div class="class1 class2 class3" data-name="name" data-date="MM/DD/YY">
<img src="path/to/image.jpg">
<div class="class4">
<h4>some text here</h4> <!-- this is what i want to search in -->
<div class="class5">
<span id="date">date: MM/DD/YY</span>
<span id="id_one">text</span>
</div>
<div class="class6">
<span id="id_two">text</span>
<span id="id_three">text</span>
</div>
<span id="id_four">text</span>
<span id="id_five"><a class= class7 href="path/to/link.html">link</a></span>
</div>
</div>
我想在 .class4 h4 中搜索,然后淡出所有.class1
不包含搜索文本的 div。
这是我遇到的解决方案的默认行为(主要是在这里),但它们似乎只适用于列表项而不是 div。例如,我尝试了这里的代码并将其修改为:
<script>
$(document).ready(function() {
$("#filter").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".class4 h4").each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(".class1").fadeOut();
// Show the list item if the phrase matches and increase the count by 1
}
else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("# of matches = "+count);
});
});
</script>
它搜索正确,但它隐藏了所有 div .class1
。
有谁知道如何使用实时过滤器搜索.class4 h4
特定文本,然后淡出.class1
不包含搜索文本的 div?
谢谢你。