javascript - 过滤多级列表

Question

我有一个深度嵌套的列表(10 层)，我想过滤该列表，以便获得 <li>我搜索过，如果是 <li>我也想给他们看 child ，这是一个代码示例...

$(document).ready(function () {
    $("#filter").keyup(function () {
        var filter = $(this).val();
      
        $("li").each(function () {
            if (filter == "") {
                $(this).css("visibility", "visible");
                $(this).fadeIn();
            } else if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).css("visibility", "hidden");
                $(this).fadeOut();
            } else {
                $(this).css("visibility", "visible");
                $(this).fadeIn();
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" />
<ul>
    <li>Tom</li>
    <li> <a>Peter</a>

        <ul>
            <li> <a>John</a>
                <ul>
                    <li> <a>Doe</a>

                        <ul>
                            <li> <a>Shia</a>

                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a>Nicolas</a>

            </li>
            <li><a>Reem</a>

            </li>
        </ul>
    </li>
    <li><a>Danial</a>
        <ul>
            <li> <a>Adam</a>

            </li>
        </ul>
    </li>
</ul>

在上面的例子中，我设法得到了 <li>我搜索过，但我不知道如何让它的 child 可见并打开(如果他有的话)。

注意:您不必重复使用我在此处发布的代码，如果可以的话，您可以发布更好、更灵活的实现。

Answer 1

好的:)仅添加

         else if ($(this).text().search(new RegExp(filter, "i")) < 0) {

            if(!$(this).parent().parent().is('li')){
                $(this).css("visibility", "hidden");
                $(this).fadeOut();
            }

        }