найти детей в jquery

Question

У меня есть древовидная структура, в этом дереве есть неупорядоченный список (ul). В нем есть элементы li, и в этих элементах li это может быть диапазон или список ul.

это одна часть моих кодов:

  <li id="main_li"> 
       <div class="first_division"></div> 
       <span>products</span> 
       <ul style="display: block;"> 
        <li> 
         <div class="division1"></div> 
         <span>products_cat_1</span> 
         <ul style="display: none;"> 
          <li> 
           <span>products_cat_1_milk</span> 
          </li> 
         </ul> 
        </li>     
        <li> 
         <span>products_yoghurt</span> 
        </li>     
        <li> 
         <span>products_butter</span> 
        </li> 
       </ul> 
      </li> 

я хочу Lī элементов доступа в уль теге, где родительский литий идентификатор «main_li», я хочу, чтобы это сделать, нажав на пролете в ли.

Как я могу сделать это с помощью jquery?

Answer 1

Селектор CSS, который соответствует элементам Li под ULS которых родитель «main_li» является

#main_li > ul > li 

далее комментарий ниже:

Чтобы получить доступ к ул, которая является родственной к промежутку, вы хотите селектор next(). Если вы находитесь в обработчик щелчка на пролете, срок будет this:

var siblingUL = $(this).next('ul'); 

Answer 2

Присоединить обработчик щелчка к соответствующему <span>. Внутри функции обработчика перейдите к интересующим узлам, используя методы tree traversal.

Некоторые селекторы, которые могут быть полезны здесь:

[X] > [Y] // select all Y that are children of X 
[X] [Y] // select all Y that are descendants of X 

Пример)

$("#main_li > span") 
// selects: 
// <span>products</span> 

$("#main_li span") 
// selects: 
// <span>products</span> 
// <span>products_cat_1</span> 
// <span>products_cat_1_milk</span> 
// <span>products_yoghurt</span> 
// <span>products_butter</span> 

Предполагая, что вы приложите обработчик щелчка на <span>products</span>, и внутри обработчика щелчка вы хотите перейти ко всем <li> детей которые находятся на том же уровне, что и этот диапазон, вы можете сделать:

$("#main_li > span").click(function() { 
    $(this).siblings("ul").children("li").each(function() { 
     // do something with each <li> 
    }); 
}); 

Answer 3

Если у вас есть несколько LIs', you should use a учащемуся rather than ID eg # main_li`

$(function(){ 
    $('.main_li span').click(function(){ 
    $(this).parents('.main_li').find('li').each(function(){ 
     // your further code here.... 
    }); 
    }); 
});