MogLog

メモというか日記というか備忘録というか

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/