web-dev-qa-db-ja.com

JQuery next（）-クラスのみを使用して次の兄弟を取得する

私はウェブアコーディオンのようなものを作成しようとしています。

視覚的な例：

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

それぞれの「TitleDiv」をクリックして「ContentDiv」を切り替えられるようにしたい（jquery関数toggle（））。

以下を試しましたが、うまくいきません。

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/

私は自分の機能プロセスを次のように説明します。

  1. 「titleDiv」という名前のクラスを持つ要素をクリックするときは、次のようにします。

1.1。クリックした要素を選択します。

1.1.1。 「contentDiv」という名前のクラスを持つ、クリックされた要素の次の兄弟を選択します。

1.1.1.1。関数toggle（）をこの最後の要素に作用させます（「contentDiv」という名前のクラスを使用）。

私が間違っているか、何かが足りないようです。

。

jquery 1.8.3を含めています（正しく）

これはクラスの代わりにIDを使用する場合に機能します（私はそれらの使用を避けようとしています）

クリック関数内にアラートを配置しましたが、機能します（問題はその内部にあります）。

jqueryclassnextsiblings
13
Edu

.nextAll()および:firstを使用して、次のcontentDivを取得します

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

ここでデモ http://jsfiddle.net/Cs3YY/1/

35
Anton