jQuery选择器，最接近的兄弟姐妹组合

Question

我有以下html：-

<ul class="nav-list">
    <li><a style="cursor:pointer;"><span class="hello"> ></span>OVERVIEW</a> 
        <ul here>
            <li id="Overview"><a href="/en/overview">OVERVIEW</a>


        </ul>
    </li>
</ul>

我希望在单击span class hello时，此处的ul将添加一个类，并且尝试了以下操作：

<script>
$(function(){
    $('.hello').click(function(){
        $(this).siblings().find('ul').addClass('hello');
    })  
})
</script>

在这种情况下，我该如何处理子母，父母和孩子并找到（'ul'）？

Answer 1

<script>
$(function(){
    $('.hello').click(function(){
        $(this).closest("li").find('ul').addClass('hello');
    })  
})
</script>

参考最近 ， 找到

Answer 2

ul是父li元素的下一个同级

$(function(){
    $('.hello').click(function(){
        $(this).parent().next().addClass('hello');
    })  
})

演示： 小提琴

Answer 3

<script>
$(function(){
    $('.hello').click(function(){
        $(this).parent().siblings().find('ul').addClass('hello');
    })  
})
</script>

跨度没有任何同级ul，其父

Answer 4

您可以通过两种方式进行操作：

1：遍历.closest（）并使用.find（）

$('.hello').click(function(){
    $(this).closest('li').find('ul').addClass('hello');
})

2：使用.parent（）在1级上获取elem并使用.siblings（）

$('.hello').click(function(){
    $(this).parent().siblings('ul').addClass('hello');
})

Answer 5

 $('.hello').click(function(){
        $(this).closest("li").find('ul').addClass('hello');
  }) 

Answer 6

根据http://api.jquery.com/find/

您不需要siblings()调用

$(this).find('ul').addClass('hello');

会没事的

Answer 7

一种简单的方法是在点击侦听器内部：

$(this).closest("li").find("ul").addClass("hello");

最接近的地方是li容器，那么您可以在容器中找到合适的吊钩ul。

我使用此解决方案而不是.parent（），因为它不依赖元素在DOM中的位置，并且如果出于任何原因将span或anchor包装在另一个标签中，它仍然可以工作。