【jQuery】兄弟要素を取得する

jQueryで直接指定して要素を取得するのは頻繁に行いますが、 兄弟要素で「じゃないやつら」を取得したいときに使うのがsiblings()です。

<nav>
    <ul>
        <li class="nav01">ナビ01</li>
        <li class="nav02">ナビ02</li>
        <li class="nav03">ナビ03</li>
        <li class="nav04">ナビ04</li>
        <li class="nav05">ナビ05</li>
    </ul>
</nav>

上記ソースでclassが”nav03″以外取得したい場合。

$(".nav03").siblings();

で取得できます。

ちなみに前の要素はprev()、次の要素はnext()

たとえばnav03クラスの前の要素を取得したいときは

$(".nav03").prev();

nav03クラスの次の要素を取得したいときは

$(".nav03").next();

ココよりこっち側全部取得

前の要素全てを取得したいときは

$(".nav03").prevAll();

次の要素全てを取得したいときは

$(".nav03").nextAll();

なのだ。