JQuery와 중첩 된 UL-리 트리, 검색 및

Question

을 적용 나는 jQuery를 함께 검색

그래서이 일치하는 스타일을 적용 할 UL의의 나무가 : ' ")") 및 클래스를 추가 "+ mysearch +"(검색 someselector을 "'

내가 원하는

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

(말) 단어"패키지 "를 포함하는 모든 항목에 대한 검색 (내가 ($로 가정 접을 수 있음 "모두 부모 li 항목을 입력하고 실제 일치하는 항목에 "강조 표시된"클래스를 추가하십시오. jQuery 자식 선택기입니다.하지만 직접 자식으로 보이는 것 같습니다. jQuery 초보자가하는 일은 훨씬 어려워 보입니다. thing.addClas()는 나에게 괜찮습니다.하지만 선택기 부분은 상당히 이해할 수 없습니다.

Answer 1

글쎄, jQuery는 (다소간) CSS 스타일 선택을 사용합니다. > 직접적인 아이를 의미합니다 - 아이를 갖기 위해서는 '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>으로 동일하게 처리 할 수 ​​있습니다. Google은 class="highlighted"을 적용하고 크롤링 상위 <li>에 class="collapsible"을 추가하여 텍스트가 포함 된 범위를 검색합니다.

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