trouver les enfants dans jquery

Question

j'ai une structure d'arbre, il y a une liste non ordonnée (ul) dans ce tree.i ont des articles de li dans, et en ce que les éléments li, il pourrait être une période ou une liste de ul.

c'est une partie de mes codes:

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

Je veux des éléments d'accès li dans la balise ul où l'id li parent est « main_li », je veux pour le faire en cliquant sur le span à l'intérieur li.

comment puis-je faire cela avec jquery?

Answer 1

Le sélecteur CSS qui correspond aux éléments li sous ELU dont le parent est « main_li » est

#main_li > ul > li 

plus de commentaire ci-dessous:

Pour accéder à la ul qui est un frère à une période, vous voulez le sélecteur next(). Si vous êtes dans un gestionnaire de clic sur la durée, la durée sera this:

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

Answer 2

Joindre un gestionnaire de clic au <span> concerné. A l'intérieur de la fonction de gestionnaire, naviguer vers les noeuds d'intérêt en utilisant des méthodes tree traversal.

Certains sélectionneurs qui pourraient être utiles ici:

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

Exemple)

$("#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> 

En supposant que vous attachez un gestionnaire de clic sur <span>products</span>, et dans le gestionnaire de clic que vous souhaitez accéder à tous <li> enfants qui sont au même niveau que cette envergure, vous pourriez faire:

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

Answer 3

Si vous avez plusieurs LIs', you should use a classe rather than id eg # main_li`

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