JQuery next() - 仅使用类获取下一个兄弟答案

【问题标题】：JQuery next() - Getting the next sibling using only classesJQuery next() - 仅使用类获取下一个兄弟
【发布时间】：2013-01-31 11:29:44
【问题描述】：

我正在尝试创建类似网络手风琴的东西。

视觉示例：

[TITLE DIV 1]
[CONTENT DIV 1]
[TITLE DIV 2]
[CONTENT DIV 2]
[TITLE DIV 3]
[CONTENT DIV 3]

我希望能够通过单击相应的“Title Div”来切换（jquery function toggle()）“Content Div”。

我尝试了以下方法，但它不起作用。

http://jsfiddle.net/Cs3YY/

HTML：

<div class="topSeparator"></div>
<div class="titleDiv">
    <h1>Title 1</h1>
</div>
<div class="bottomSeparator"></div>                 
<div class="contentDiv"><h2>Content 1</h2></div>

<div class="topSeparator"></div>
<div class="titleDiv">
    <h1>Title 2</h1>
</div>
<div class="bottomSeparator"></div>                 
<div class="contentDiv"><h2>Content 2</h2></div>

查询：

$('.titleDiv').click(function() {       
        $(this).next('.contentDiv').toggle();
});

http://jsfiddle.net/Cs3YY/

我会这样描述我的函数过程：

当您单击具有名为“titleDiv”的类的元素时，请执行以下操作：

1.1。选择被点击的元素；

1.1.1。使用名为“contentDiv”的类选择该单击元素的下一个兄弟；

1.1.1.1。使函数 toggle() 作用于最后一个元素（使用名为“contentDiv”的类）；

看来我错了，或者我遗漏了什么。

我包括 jquery 1.8.3（正确）。

这在使用 ID 而不是类时有效（我试图避免使用它们）。

我在 click 函数中放置了一个警报，它可以工作（问题就在它里面）。

【问题讨论】：

标签： jquery class next siblings

【解决方案1】：

使用.nextAll()和:first获取下一个contentDiv

  $(this).nextAll('.contentDiv:first').toggle();

在这里演示http://jsfiddle.net/Cs3YY/1/

【讨论】：

谢谢安东。我仍然不明白 next('.contentDiv') 和 nextAll('.contentDiv') 之间的区别，不应该都进入元素吗？（nextAll 会得到所有）
next 直接获取元素，在本例中为bottomSeparator。使用 nextAll 获取之后的所有元素，但使用 :first 获取带有选择器的第一个元素(".contentDiv")
不应该 next('.contentDiv') 选择与提供的参数相等的第一个下一个元素（Class contentDiv）吗？
不，next 只获取下一个元素，在 next 中编写一个选择器可以获取下一个元素，如果它有选择器，否则它会为 null
现在我明白了。当我阅读文档时，这是一个英语问题，我教它会比较直到它真正找到一个兄弟姐妹，但它似乎只是比较下一个兄弟姐妹。谢谢安东。

【解决方案2】：

虽然，这是因为 next() 选择了底部分隔符。你可以使用这个技巧

$('.titleDiv').click(function() {       

    $(this).next().next().toggle();
});

http://jsfiddle.net/Cs3YY/12/

【讨论】：

我认为这比其他解决方案更难维护，因为“魔术”双重下一个
如果由于某种原因我更改了 HTML 结构（删除分隔符 div 或在该分隔符之前/之后添加一些内容），这将停止工作。
是的，这只是一个技巧，不是很灵活，但我认为它会显示出问题所在。