jQuery选择相邻元素

Question

<li>
    <a class="handle" href="abc.htm">TopLink</a> 
    <ul class="container"> 
        <li> 
            <a href="xyz.htm">SubLink1</a> 
        </li>       
    </ul> 
</li>

当点击TopLink（class="handle"）时；

问题：如何编写jQuery选择器，以便在单击TopLink时选择ul class="container"

类似于; $(this).(获取下一个具有classname="container"的UL)

- user6890

Answer 1

如果你的 HTML 结构总是这样，你可以简单地使用 next：

$(".handle").click(function() {
    var ul = $(this).next();
});

如果链接和 ul 之间可能有其他元素，你可以使用siblings来获取所有匹配选择器的元素：

$(".handle").click(function() {
    var uls = $(this).siblings("ul.container");
});

虽然这也会获取前面的同级元素，但如果只需要获取后续的同级元素，可以使用nextAll方法：

$(".handle").click(function() {
    var uls = $(this).nextAll("ul.container");

    //You can then use `.eq(0)` to get the closest matching sibling:
    var sibling = uls.eq(0);
});

- James Allardice