0

我有一棵 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 条目，并将“突出显示”类添加到实际匹配的条目中。我知道 > 是 jQuery 子选择器，但这似乎只是直接子级，而我作为 jQuery 新手所做的事情似乎要困难得多。thing.addClas()对我来说没问题，但是我不能完全掌握选择器部分。

4

3 回答 3

3

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

于 2010-03-02T11:16:02.613 回答
2

尝试自定义选择器

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

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

$("ul:hasWordPackage").addClass("highlighted").parents("li").addClass("collapsible");
于 2010-03-02T11:17:08.873 回答
1

有几件事，首先你有多个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");
  });
});
于 2010-03-02T11:19:02.360 回答