Question

我有一个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>

我想（比方说）搜索包含单词“Package”的任何条目（我假设使用$（“someselector：search（'”+ mysearch +“'）”），并将类“collapsible”添加到所有父 li条目，并将“highlight”类添加到实际匹配的条目中。我知道＆gt;是jQuery子选择器，但这似乎只是直接的孩子，我作为一个jQuery新手做的事情似乎更难。 thing.addClas（）对我很好，但选择器部分我无法理解。

Answer 1

好吧，jQuery使用（或多或少） CSS样式选择。＆GT;意味着直接的孩子 - 要得到任何孩子，你只需要去'ul li'。这是关于CSS选择的一个很棒的教程：http://css.maxdesign.com.au/selectutorial/

Answer 2

尝试custom selector

$(document).ready(function() { 
    $.extend($.expr[':'], { 
        hasWordPackage: function(el) { 
            return ($(el).val().indexOf("Package") > -1);
        } 
    }); 
});

所以你可以说（如果我理解你的话）

$("ul:hasWordPackage").addClass("highlighted").parents("li").addClass("collapsible");

Answer 3

一些事情，首先你有多个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><span class="folder" id="Regional">Regional</span>
          <ul class="browser 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 class="browser filetree">
                      <li class="closed" ><span class="folder" id="Users">Users</span>
                          <ul class="browser filetree">
                              <li class="closed" ><span class="folder" id="Students">Students</span>
                                  <ul class="browser 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 class="browser 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 class="browser 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>
</div>

首先，我们声明了一个不区分大小写的搜索，您可能需要使用:Contains，默认的:contains选择器区分大小写。将整个树包裹在div中只是为了干净，但您可以对<ul>执行相同操作。我们正在搜索包含文字的范围，应用class="highlighted"并抓取父<li>添加class="collapsible"。

要说这是一个搜索框，我猜是你的最终目标，只需创建一个调用上面的onload代码的函数，就像这样：

$(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");
  });
});

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

3 个答案: