JQuery вложенное дерево ul-li, поиск и применение - PullRequest
Новая
       18

JQuery вложенное дерево ul-li, поиск и применение

0 голосов
/ 02 марта 2010

У меня есть дерево 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» к all parent li записей и добавьте класс «подсвеченный» к фактическим соответствующим записям. Я знаю,> это дочерний селектор jQuery, но это, кажется, только прямые потомки, и то, что я делаю как новичок jQuery, кажется намного сложнее. thing.addClas () мне подходит, но часть селектора я не совсем понимаю.

Ответы [ 3 ]

3 голосов
/ 02 марта 2010

Хорошо, jQuery использует (более или менее) Выбор в стиле CSS . > означает прямой ребенок - чтобы получить любого ребенка, вам просто нужно пойти 'ul li'. Это отличный учебник по выбору CSS: http://css.maxdesign.com.au/selectutorial/

2 голосов
/ 02 марта 2010

Попробуйте пользовательский селектор 

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

Так что вы можете сказать (если я вас правильно понимаю) 

$("ul:hasWordPackage").addClass("highlighted").parents("li").addClass("collapsible");
1 голос
/ 02 марта 2010

Несколько вещей, сначала у вас есть несколько 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".

Чтобы поместить это, скажем, в окно поиска, которое, как мне кажется, является вашей конечной целью, просто создайте функцию, которая вызывает приведенный выше код загрузки, например: 

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