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（） - 僅使用類獲取下一個兄弟節點

回答

相關問題