次の要素内のdivをセレクターで選択したい

Question

<div id="common">
<h3>aaaa</h3>
<button class="btn">aaaa</button>
</div>

<div id="common">
<h3>bbbb</h3>
<button class="btn">bbbb</button>
</div>

<div id="common">
<h3>cccc</h3>
<button>cccc</button>
</div>

上記のようなコードがあり、**「buttonを押したときに次のDIV全体を点滅させたい」**と考えています。

$('body').on( 'click', '.btn', function() {
$(this).nextAll('#common').fadeOut().fadeIn(500).fadeOut().fadeIn(500);
return false;
})

と記載しましたが動作しませんでした…。

（例）aaaaボタンをクリック　→　bbbbのdiv部分を点滅
（例）bbbbボタンをクリック　→　ccccのdiv部分を点滅

よろしくお願いいたします。

Comments

[m.ts10806]

「同一IDは1HTML内に1つ」の原則があるのですか、問題ないでしょうか。また「点滅」部分はCSSで実装した方が良いように思いますが、なぜIn,Outの繰り返しで実装しようと思ったのでしょうか？

Answer 1

$('body').on( 'click', '.btn', function() {
  $(this).parent().next("#common").fadeOut().fadeIn(500).fadeOut().fadeIn(500);
});

id="common"がたくさんありますが、idは他と重複すべきではありません。