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>

参考closest，find

Answer 2

ul是父li元素的下一个兄弟

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

演示：Fiddle

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级并使用.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容器，那么你可以在容器中找到正确的sibiling ul。

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

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

7 个答案:

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

2：使用.parent（）将元素升级到1级并使用.siblings（）