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

Question

у меня есть древовидная структура, в этом дереве есть неупорядоченный список (ul). У меня есть элементы li, и в этих элементах li это может быть span или список 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>

Я хочу получить доступ к элементам li в теге ul, где родительский идентификатор li - "main_li", я хочу сделать это, нажав на диапазон внутри li.

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

Answer 1

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

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

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

Селектор CSS, который соответствует элементам li в ULS, чей родитель 'main_li', равен

#main_li > ul > li

далее, чтобы прокомментировать ниже:

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

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

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