使用 img 显示最接近 li 的 JQuery 过滤器

Question

我有一个包含许多列表项的列表，我想创建一个自定义过滤器，除了一个问题外，我几乎完成了该过滤器。在列表中，有不同的部分充当标题，如果该标题下有任何项目，则标题列表项也应显示。

这是列表的格式：

<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

试试这个 (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();
    });
});

Answer 2

可以更优化地完成，但这可能不会与您的原始代码有太多差异。如果可能的话，您只需要稍微不同地组织 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();
        });
    });
});