javascript - 显示最接近 li 和 img 的 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();
    });
});