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

我想访问父 li id 为“main_li”的 ul 标记中的 li 元素，我想通过单击 li 中的 span 来完成它。

我怎么能用jquery做到这一点？

Answer 1

匹配父级为'main_li'的uls下的li元素的CSS选择器是

#main_li > ul > li

进一步评论如下：

要访问作为跨度兄弟的 ul，您需要next()选择器。如果您在跨度上的点击处理程序中，跨度将是this：

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

Answer 2

将点击处理程序附加到相关的<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 3

如果你有多个LIs', you should use a类rather thanid eg#main_li`

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