Question

我试图在ul中扩展我对li元素的过滤功能。我的ul结构看起来像这样：

＆＃13;

    <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>

＆＃13;

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

例如：搜索＆＃34; li2.3.2＆＃34;会回来：

＆＃13;

    <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>

＆＃13;

编辑：为了澄清，因为我没有在原帖中提及......我试图按用户输入过滤（部分匹配计数）。我当前的方法是通过在文本输入框中输入用户输入，将所有.list元素放在ul中，并在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()

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

3 个答案: