过滤 ul 中的 li 元素并保留路径

Question

我正在尝试为 ul 中的 li 元素扩展我的过滤功能。 我的 ul 结构如下所示：

    <ul>
        <li class="root"><span class="text">Root1</span>
            <ul>
                <li class="list"><span class="text">li1.1</span></li>
            </ul>
        </li>
        <li class="root"><span class="text">Root2</span>
            <ul style="display: block;">
                <li class="root"><span class="text">Root2.1</span>
                    <ul style="display: block;"></ul>
                </li>
                <li class="root"><span class="text">Root2.2</span>
                    <ul style="display: block;">
                        <li class="list"><span class="text">li2.2.1</span></li>
                    </ul>
                </li>
                <li class="root"><span class="text">Root2.3</span>
                    <ul style="display: block;">
                        <li class="list"><span class="text">li2.3.1</span></li>
                        <li class="list"><span class="text">li2.3.2</span></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="root"><span class="text">Root3</span>
            <ul>
                <li class="list"><span class="text">li3.1</span></li>
            </ul>
        </li>
        <li class="root"><span class="text">Root4</span>
            <ul>
                <li class="list"><span class="text">li4.1</span></li>
                <li class="list"><span class="text">li4.2</span></li>
            </ul>
        </li>
    </ul>

目前我有过滤功能，可以根据 .list 元素之间的查询进行过滤。现在我正在尝试以某种方式实现它，即在过滤列表（仍然只有 .list 元素）时，会有结构历史记录。

例如：搜索“li2.3.2”会返回：

    <ul>
        <li class="root"><span class="text">Root2</span>
            <ul style="display: block;">
                <li class="root"><span class="text">Root2.3</span>
                    <ul style="display: block;">
                        <li class="list"><span class="text">li2.3.2</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

编辑：为了澄清，因为我没有在原始帖子中提到这一点......我正在尝试按用户输入（部分匹配计数）进行过滤。 我当前的方法是通过在文本输入框中获取用户输入，获取 ul 中的所有 .list 元素并比较每个元素是否 span.text 包含搜索文本。

Answer 1

你应该给每个楼层class，并使用CSS过滤器:parent和:nth-chiled找到你想要的

Answer 2

@pc9529，是的，这是可能的。但在这里你只想显示父 li 节点 html。因此，为属于您的父 UL 的 li 赋予不同的类。看看给定的解决方案，

$(document).ready(function(){
    $("li").click(function(e){
       e.stopPropagation();
       if($(this).hasClass("root1"))
       {
        
            alert($('<div>').append($(this).clone()).html());
       }
       else{
          alert($('<div>').append($(this).closest(".root1").clone()).html());
       }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
        <li class="root1"><span class="text">Root1</span>
            <ul>
                <li class="list"><span class="text">li1.1</span></li>
            </ul>
        </li>
        <li class="root1"><span class="text">Root2</span>
            <ul style="display: block;">
                <li class="root"><span class="fa fa-chevron-down"></span><i class="fa root-checkbox fa-square-o"></i><span class="text">Root2.1</span>
                    <ul style="display: block;"></ul>
                </li>
                <li class="root"><span class="text">Root2.2</span>
                    <ul style="display: block;">
                        <li class="list"><span class="text">li2.2.1</span></li>
                    </ul>
                </li>
                <li class="root"><span class="text">Root2.3</span>
                    <ul style="display: block;">
                        <li class="list"><span class="text">li2.3.1</span></li>
                        <li class="list"><span class="text">li2.3.2</span></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="root1"><span class="text">Root3</span>
            <ul>
                <li class="list"><span class="text">li3.1</span></li>
            </ul>
        </li>
        <li class="root1"><span class="text">Root4</span>
            <ul>
                <li class="list"><span class="text">li4.1</span></li>
                <li class="list"><span class="text">li4.2</span></li>
            </ul>
        </li>
    </ul>

Answer 3

请看看这个JSFiddle

JQuery 通过文本查找您的项目，然后查找所有包含“.root”类的父项，最后获取最后一个父项，即层次结构的根 ul 元素。

$('.list:contains("li2.3.2")').parents('.root').last().html()