使用jQuery过滤多个<ul>列表
我在一个页面上有多个列表（多个类别的产品），如下所示：
<h3>Category 1</h3>
<ul id="category1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<h3>Category 2</h3>
<ul id="category2">
<li>item27</li>
<li>item28</li>
</ul>
列表的数量是可变的。
我想在这里的演示页面上有一个过滤器http://static.railstips.org/orderedlist/demos/quicksilverjs/jquery.html。
但它应该搜索不同的列表。
如果用户搜索“2”，那么结果应该是：
<h3>Category 1</h3>
<ul id="category1">
<li>item2</li>
</ul>
<h3>Category 2</h3>
<ul id="category2">
<li>item27</li>
<li>item28</li>
</ul>
如果他搜索“1”，那么它应该是（不要在没有结果的情况下显示列表中的h3标题）：
<h3>Category 1</h3>
<ul id="category1">
<li>item1</li>
</ul>
有人能帮我吗？
提前致谢！
如何这样的事情：
HTML
<input type="text" />
<ul id="category1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ul>
<li>item27</li>
<li>item28</li>
</ul>
JS
$(function(){
$('input[type="text"]').keyup(function(){
var searchText = $(this).val();
$('ul > li').each(function(){
var currentLiText = $(this).text(),
showCurrentLi = currentLiText.indexOf(searchText) !== -1;
$(this).toggle(showCurrentLi);
});
});
});
http://jsfiddle.net/EFTZR/146/
使用filter（）的另一个解决方案如下所述：
$('input[type="text"]').keyup(function(){
var that = this, $allListElements = $('ul > li');
var $matchingListElements = $allListElements.filter(function(i, li){
var listItemText = $(li).text().toUpperCase(),
searchText = that.value.toUpperCase();
return ~listItemText.indexOf(searchText);
});
$allListElements.hide();
$matchingListElements.show();
});
http://jsfiddle.net/EFTZR/441/
你可以用jQuery中的filter方法来做到这一点：
var valueToSearch = "item1"; // this one should come from the search box
var allListItems = $("ul > li");
var filteredItems = allListItems.filter(function(index) {
var listItemValue = $(this).text();
var hasText = listItemValue.indexOf(valueToSearch) > -1;
return hasText;
});
接下来，您可以使用for循环在列表或类似的东西中显示filteredItems变量中的值。
链接地址: http://www.djcxy.com/p/75057.html