如果Div中的列表被隐藏，则隐藏标题标记

Question

我制作了一个包含5个列表的页面，可以通过1个jQuery搜索框进行过滤。我有过滤器正常工作，但我希望能够隐藏标头标签，如果所有列表元素都从过滤器隐藏。

HTML

<div id="myDiv">
<input class="search" type="text" placeholder="Type here to search..." />
<div class="list">
<h2>
List One
</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="list">
<h2>
List Two
</h2>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>

的jQuery

$(function(){

    $('input[type="text"]').keyup(function(){

        var text = $(this).val().toLowerCase();

        $('#myDiv ul li').each(function(){

             if($(this).text().toLowerCase().indexOf(text) == -1)
                 $(this).slideUp();
             else
                $(this).slideDown();

        });     
    });

});

See this JSFiddle

谢谢！

Answer 1

如果不是隐藏li，请检查:visible是h2。

＆＃13;

＆＃13;

$(function(){

    $('input[type="text"]').keyup(function(){

        var text = $(this).val().toLowerCase();

        $('#myDiv ul li').each(function(){

            if($(this).text().toLowerCase().indexOf(text) == -1)
                $(this).slideUp();
            else
                $(this).slideDown();

        });
        $('h2').each(function(){
            if ($(this).next('ul').children(':visible').length == 0) {
                $(this).slideUp();
            }else {
                $(this).slideDown();
            }
        });
    });

});

＆＃13;

ul {
        list-style: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
    <input class="search" type="text" placeholder="Type here to search..." />
    <div class="list">
        <h2>
            List One
        </h2>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div class="list">
        <h2>
            List Two
        </h2>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;