如何使用 next() 在 jquery 中找到最近的 ul？答案

【问题标题】：how to use next() to find the closest ul in jquery?如何使用 next() 在 jquery 中找到最近的 ul？
【发布时间】：2012-05-05 10:48:25
【问题描述】：

我有一个简单的菜单，如下所示：

<ul id="navigation">
    <li id="m_li">
         <div><span>+</span><a href="#" >myself</a></div>
        <ul class="test" id="x_ul">
            <li id="li">
                <a href="#" >Pictures</a>
            </li>
            <li id="li">
                <a href="#" >Audio</a>
            </li>
        </ul>
    </li>
    <li id="profile_modeling_li">
        <div><span>+</span><a href="#" >friend</a></div>
        <ul class="test" id="y_ul">
            <li id="li">
                <a href="#" >Pictures</a>
            </li>
            <li id="li">
                <a href="#" >Video</a>
            </li>
        </ul>
    </li>
</ul>

然后我使用 jquery，所以当我点击 + 签名时，ul 会向下滑动：

$("#navigation > li > div > span").click(function(){

    if(false == $(this).next('ul').is(':visible')) {
        $('#accordion ul').slideUp(300);
    }
    $(this).next('ul').slideToggle(300);
});

问题是$(this).next('ul') 似乎不喜欢下一个 ul

任何想法我做错了什么？

【问题讨论】：

你可以使用$(this).find('ul')
不，你不能。find 会查看元素的后代，而在这种情况下，ul 是元素父元素的兄弟。

标签： jquery menu slidetoggle next

【解决方案1】：

使用

$(this).parent().next()

而不是

$(this).next();

当然，您可以传递一个选择器（更简单或更复杂），将所需元素标识为参数：

$(this).parent().next('ul.test[id$="_ul]"');

【讨论】：

【解决方案2】：

.next / .prev 遍历兄弟姐妹并且 ul 不是跨度的孩子。您可能应该找到最近的li 并找到.test。

 $(this).closest('li').find('ul.test')

【讨论】：

.next() 和 .prev() 遍历兄弟姐妹，而不是孩子。
@AnthonyGrist aaw .. 我的意思是兄弟姐妹，但在孩提时代写作。感谢您指出。

【解决方案3】：

转换

$(this).next('ul')

到

$(this).parent().next('ul')

你可以在这里看到http://jsfiddle.net/PYqS2/

【讨论】：