JQuery вложенную уль-ли дерево, поиск и применение

Question

У меня есть дерево уль о том, что я хочу найти с 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> 

Я хочу (скажем) поиск всех записей, содержащих слово "пакет" (я предполагаю, что с $ ("someselector: поиск (' "+ MySearch +"')"), и добавить класс " разборный "до всего parent li записи и добавьте класс «выделено» в соответствующие совпадающие записи. Я знаю, что это дочерний селектор jQuery, но это, кажется, только прямые дети, и то, что я делаю как новичок jQuery, кажется намного сложнее. вещь.addClas() в порядке, но селекторная часть, которую я не могу понять.

Answer 1

Ну, jQuery использует (более или менее) CSS-style selection. > означает прямой ребенок - чтобы получить любого ребенка, вам просто нужно пойти «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", идентификаторы должны быть уникальными.

Вот полный пример:

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

Чтобы поместить это, скажем, в SearchBox, который я предполагаю, является вашей конечной цели, просто создать функцию, которая вызывает код 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"); 
    }); 
});