如何使用next()在jQuery中找到最接近的ul？

Question

我有一个简单的菜单，就像这样：

<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。

有没有什么想法，我做错了什么？

- Patrioticcow

---

你可以使用 $(this).find('ul')。 - Jared

不行，你不能。find会查找元素的后代，而在这种情况下，ul是该元素父级的同级。 - gion_13

Answer 1

使用

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

取而代之

$(this).next();

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

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

- gion_13

Answer 2

.next / .prev 可以遍历兄弟节点，但是 ul 不是 span 的子节点。你应该找到最近的 li 并查找其中的 .test。

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

- Selvakumar Arumugam

---

.next() 和 .prev() 遍历的是兄弟节点，而不是子节点。 - Anthony Grist

@AnthonyGrist 噢，我是指兄弟姐妹，但写成了孩子。谢谢你指出来。 - Selvakumar Arumugam

Answer 3

转换

$(this).next('ul')

到

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

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

- Hüseyin BABAL