Question

我有一个包含大量列表项的List，我想创建一个自定义过滤器，除了一个问题我几乎已经完成了。在列表中有不同的部分作为标题，如果该标题下有任何项目，那么标题列表项也应该显示。

这是List的格式：

<ul id="forms-list">
   <li><a><img/></a></li> <-----This is a Header
   <li><a></a></li>
   <li><a></a></li>
   <li><a></a></li>
   <li><a></a></li>
   <li><a><img/></a></li> <-----This is a Header
   <li><a></a></li>
   <li><a></a></li>
   <li><a></a></li>
   <li><a></a></li>
</ul>

如果该标题下没有任何项目，则标题应保持隐藏状态。

以下是我目前的代码：

$('#filter').keyup(function () {
    var rex = new RegExp($(this).val(), 'i');
    $('#forms-list li').hide();
    var $filtered = $('li').filter(function () {
        return rex.test($(this).text());
    });

    $filtered.each(function () {
        $(this).closest("li").has("img").show();
        $(this).show();
    });
});

Answer 1

可以更优化地完成，但这可能有效，而不会过多地偏离原始代码。如果可能的话，你只需要稍微改变一下html。如果您有数千个这样的过滤器，您可能希望在搜索时更加优化和简洁。

http://jsfiddle.net/7tg39a9x/1/

<input type="text" id="filter" />

<ul class="filterable">
    <li class="header"><img src="http://icons.iconarchive.com/icons/famfamfam/silk/16/layout-header-icon.png" /> Header 1</li>
    <li>item</li>
    <li>item 2</li>
    <li>abc</li>
</ul>

<ul class="filterable">
    <li class="header"><img src="http://icons.iconarchive.com/icons/famfamfam/silk/16/layout-header-icon.png" /> Header 2</li>
    <li>item</li>
    <li>item 2</li>
    <li>abc</li>
</ul>

<ul class="filterable">
    <li class="header"><img src="http://icons.iconarchive.com/icons/famfamfam/silk/16/layout-header-icon.png" /> Header 3</li>
    <li>item</li>
    <li>item 2</li>
    <li>abc</li>
</ul>

并附带一些脚本

$(function() {
    $('#filter').keyup(function () {
        var rex = new RegExp($(this).val(), 'i');
        $('.filterable li').hide();
        var $filtered = $('li').filter(function () {
            return rex.test($(this).text());
        });

        $filtered.each(function () {
            $(this).show();
            $(this).parent().find('li').first().show();
        });
    });
});

Answer 2

试试这个（demo）：

$('#filter').keyup(function () {
    var rex = new RegExp($(this).val(), 'i');
    $('#forms-list li').hide();
    var $filtered = $('li').filter(function () {
        return rex.test($(this).text());
    });

    $filtered.each(function () {
        $(this).prevUntil("li:has(img)").prev().show();
        $(this).show();
    });
});

使用img显示最接近的li的JQuery Filter

2 个答案: