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>

我想访问ul标签中的li元素，其中父li id是“main_li”，我想通过点击li中的范围来完成它。

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

Answer 1

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

#main_li > ul > li

进一步评论如下：

要访问作为范围的兄弟的ul，您需要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....
    });
  });
});

在jquery找到孩子们

3 个答案: