JQuery嵌套ul li树，搜索和应用_Jquery_Treeview_Css Selectors_Children

JQuery嵌套ul li树，搜索和应用

jquery

JQuery嵌套ul li树，搜索和应用,jquery,treeview,css-selectors,children,Jquery,Treeview,Css Selectors,Children,我有一个ul的树，我想用jQuery搜索，并将样式应用于那些匹配的因此： Regional |-InternetAccessGroup |-Wasters |-Packaging |-Users |-Students |-Hello Fred |-Package Student |-Teachers |-Pack

我有一个ul的树，我想用jQuery搜索，并将样式应用于那些匹配的

因此：

Regional
    |-InternetAccessGroup
    |-Wasters
    |-Packaging
        |-Users
            |-Students
                |-Hello Fred
                |-Package Student
            |-Teachers
                |-Package Teacher
            |-Admins
                |-Package Admin

代码如下所示：

<ul id="browser" class="filetree">
    <li ><span class="folder" id="Regional">Regional</span>
        <ul id="browser" class="filetree">
            <li class="closed" ><span class="group" id="InternetAccessGroup">InternetAccessGroup </span></li>
            <li class="closed" ><span class="group" id="Wasters">Wasters </span></li>
            <li class="closed" ><span class="folder" id="Packaging">Packaging</span>
                <ul id="browser" class="filetree">
                    <li class="closed" ><span class="folder" id="Users">Users</span>
                        <ul id="browser" class="filetree">
                            <li class="closed" ><span class="folder" id="Students">Students</span>
                                <ul id="browser" class="filetree">
                                    <li class="closed" ><span class="person" id="helloFred"id="Hello Fred ">Hello Fred </span></li>
                                    <li class="closed" ><span class="person" id="student"id="Package Student ">Package Student </span></li>
                                </ul>
                            </li>
                            <li class="closed" ><span class="folder" id="Teachers">Teachers</span>
                                <ul id="browser" class="filetree">
                                    <li class="closed" ><span class="person" id="teacher"id="Package Teacher ">Package Teacher </span></li>
                                </ul>
                            </li>
                            <li class="closed" ><span class="folder" id="Admins">Admins</span>
                                <ul id="browser" class="filetree">
                                    <li class="closed" ><span class="person" id="packageadmin"id="Package Admin ">Package Admin </span></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>


区域

InternetAccess组
废物
包装

用户

学生们

你好，弗雷德
学生套餐


教师

套餐教师


管理员

包管理员

我想（比如）搜索任何包含单词“Package”的条目（我假设使用$（“someselector:search（“+mysearch+”））），并将类“collapsable”添加到所有父li条目中，并将类“highlighted”添加到实际匹配的条目中。我知道>是jQuery子选择器，但这似乎只是直接子项，而我作为jQuery新手所做的工作似乎要困难得多。 thing.addClas（）对我来说没问题，但选择器部分我不太懂。
好吧，jQuery使用（或多或少）CSS样式选择。>意味着直接子级——要获得任何子级，只需使用“ul li”。这是一个关于CSS选择的很棒的教程：
好吧，jQuery使用（或多或少）CSS样式选择。>意味着直接子对象——要获得任何子对象，您只需转到“ul li”。这是一个关于CSS选择的优秀教程：
尝试
所以你可以说（如果我理解正确的话）
试试看
所以你可以说（如果我理解正确的话）

有几件事，首先您有多个
id=“borwser”
，id必须是唯一的
以下是完整的示例：

<script type="text/javascript"> jQuery.expr[':'].Contains = function(a, i, m) { return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; $(function() { $("#files li span:Contains(Package)").addClass("highlighted").parents("li").addClass("collapsible"); }); </script> <div id="files"> <ul class="browser filetree"> <li>Regional <ul class="browser filetree"> <li class="closed" >InternetAccessGroup </li> <li class="closed" >Wasters </li> <li class="closed" >Packaging <ul class="browser filetree"> <li class="closed" >Users <ul class="browser filetree"> <li class="closed" >Students <ul class="browser filetree"> <li class="closed" >Hello Fred </li> <li class="closed" >Package Student </li> </ul> </li> <li class="closed" >Teachers <ul class="browser filetree"> <li class="closed" >Package Teacher </li> </ul> </li> <li class="closed" >Admins <ul class="browser filetree"> <li class="closed" >Package Admin </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>

有几件事，首先您有多个
id=“borwser”
，id必须是唯一的
以下是完整的示例：

<script type="text/javascript"> jQuery.expr[':'].Contains = function(a, i, m) { return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; $(function() { $("#files li span:Contains(Package)").addClass("highlighted").parents("li").addClass("collapsible"); }); </script> <div id="files"> <ul class="browser filetree"> <li>Regional <ul class="browser filetree"> <li class="closed" >InternetAccessGroup </li> <li class="closed" >Wasters </li> <li class="closed" >Packaging <ul class="browser filetree"> <li class="closed" >Users <ul class="browser filetree"> <li class="closed" >Students <ul class="browser filetree"> <li class="closed" >Hello Fred </li> <li class="closed" >Package Student </li> </ul> </li> <li class="closed" >Teachers <ul class="browser filetree"> <li class="closed" >Package Teacher </li> </ul> </li> <li class="closed" >Admins <ul class="browser filetree"> <li class="closed" >Package Admin </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>

我将尝试一下，但是……如果我从输入字段中获取要搜索的内容，请使用mysearch=getElementById（'userinput'）.value；我该如何将其插入hasWordPackage？如果我听起来很愚蠢，那么很抱歉。@WaveyDavey-我下面的答案显示了如何以通用的方式执行此操作，如果您正在动态搜索，请尝试一下。我将尝试一下，但是……如果我从输入字段中获取要搜索的内容，请使用mysearch=getElementById（'userinput'））.value；我如何将其插入hasWordPackage？如果我听起来很愚蠢，请道歉。@WaveyDavey-我下面的回答显示了如何以通用的方式执行此操作，如果您正在动态搜索，请尝试一下。你们（在Stackoverflow上）是令人惊讶、很棒、慷慨的人。非常感谢。你们（在Stackoverflow上）都是了不起的，很棒的，慷慨的人。非常感谢。
<script type="text/javascript"> jQuery.expr[':'].Contains = function(a, i, m) { return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; $(function() { $("#files li span:Contains(Package)").addClass("highlighted").parents("li").addClass("collapsible"); }); </script> <div id="files"> <ul class="browser filetree"> <li>Regional <ul class="browser filetree"> <li class="closed" >InternetAccessGroup </li> <li class="closed" >Wasters </li> <li class="closed" >Packaging <ul class="browser filetree"> <li class="closed" >Users <ul class="browser filetree"> <li class="closed" >Students <ul class="browser filetree"> <li class="closed" >Hello Fred </li> <li class="closed" >Package Student </li> </ul> </li> <li class="closed" >Teachers <ul class="browser filetree"> <li class="closed" >Package Teacher </li> </ul> </li> <li class="closed" >Admins <ul class="browser filetree"> <li class="closed" >Package Admin </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>

$(function() { $('#myTextbox').keydown(function() { //Clear last search $("#files li").removeclass("collapsible").find("span").removeClass("highlighted"); //Search again $("#files li span:Contains(" + $(this).val() + ")") .addClass("highlighted").parents("li").addClass("collapsible"); }); });