2012-11-30

jQueryの"next"メソッドについて

jQueryのnextメソッドの使いかたについて勘違いをしていて、数時間無駄にした。
「指定した要素の次の値を取得する」という表現方法に惑わされた。

HTML

<div id='hoge'>fuga</div>
<p>foo</p>
<span>bar</span>

jQuery

$('#hoge').next('span'); // →span要素を取得することはできない
$('#hoge').next('p');  // →p要素を取得することは可能

next() はあくまでも、その要素のとなりにあるものを取得するだけ。
条件に指定できるのは、「隣の要素が」条件にあてはまるときには取得し、そうでない場合は取得しないということ。 上の例では、divタグのとなりにあたるのはpタグなので、条件にspanを書いても取得できない。

現状では nextAll() メソッドを使う方法しか見当たらない。要素を1つだけとりたいのだが。

※参考 http://semooh.jp/jquery/api/traversing/next/%5Bexpr%5D/