JQuery next（） - 仅使用类获取下一个兄弟节点

我试图创建类似于web手风琴的东西。JQuery next（） - 仅使用类获取下一个兄弟节点

视觉例如：

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

我希望能够切换（jQuery的功能切换（））“内容格”通过点击相应的“标题格”。

我试过以下，但它不起作用。

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>

JQUERY：

$('.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函数中放置了一个alert，它工作正常（问题在里面）。

来源

2013-02-15 Edu

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

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

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

来源

2013-02-15 13:16:39 Anton

感谢安东。我仍然不明白next（'。contentDiv'）和nextAll（'。contentDiv'）之间的区别，不应该都到达元素吗？（nextAll将全部获得） – Edu 2013-02-15 13:33:37

下一步获取元素后，在这种情况下是bottomSeparator。使用nextAll获取所有元素之后，但是使用：首先获取带有选择器的第一个元素（“。contentDiv”） – Anton 2013-02-15 13:34:56

不应该next（'。contentDiv'）选择与提供的参数相同的第一个下一个元素（Class contentDiv ）？ – Edu 2013-02-15 13:39:15

-1

虽然，这是因为下一个（）选择bottomSeparator。你可以用那招

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

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

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

来源

2013-02-15 13:23:30 luxcem

我认为这比其他解决方案难以维护，由于'魔术'双关联 – 2013-02-15 13:27:06

如果由于某种原因我改变了HTML结构（删除分隔符div或在分隔符之前/之后添加某些内容），这将停止工作。 – Edu 2013-02-15 13:35:15

是的，这只是一个窍门，并不是很灵活，但我认为它会显示出错。 – luxcem 2013-02-15 13:39:38

JQuery next（） - 仅使用类获取下一个兄弟节点

回答

相关问题