jQueryで兄弟要素を取得するソースコード【サンプル有】

2019年7月9日2019年8月4日

次の兄弟要素を取得する.next

.next()は、同階層に存在する次の兄弟要素を取得します。

カッコ内に値を指定しない場合は、全く違う属性（div,li等）でも取得対象になります。

「次の要素かつli要素」と指定したい場合は、next(‘ul’)など条件を指定する必要があります。

<ul>
    <li class="ex01">リスト1</li>
    <li class="ex02">リスト2</li>
    <li class="ex03">リスト3</li><!-- この要素の次の要素を取得 -->
    <li class="ex04">リスト4</li><!-- これが赤色になる -->
    <li class="ex05">リスト5</li>
</ul>

<script>
$(function(){
    $('.ex03').next().css('color', 'red');
});
</script>

.next().next()と繋げて書くことで、「次の次の要素」といった指定も可能です。

<ul>
    <li class="ex11">リスト1</li>
    <li class="ex12">リスト2</li>
    <li class="ex13">リスト3</li><!-- この要素の次の次の兄弟要素を取得 -->
    <li class="ex14">リスト4</li>
    <li class="ex15">リスト5</li><!-- これが赤色になる -->
</ul>

<script>
$(function(){
    $('.ex13').next().next().css('color', 'red');
});
</script>

次以降すべての兄弟要素を取得する.nextAll

.nextAll()は、同階層に存在する次以降すべての兄弟要素を取得します。

<ul>
    <li class="ex21">リスト1</li>
    <li class="ex22">リスト2</li>
    <li class="ex23">リスト3</li><!-- この要素より後の兄弟要素を取得 -->
    <li class="ex24">リスト4</li><!-- これが赤色になる -->
    <li class="ex25">リスト5</li><!-- これが赤色になる -->
</ul>

<script>
$(function(){
    $('.ex23').nextAll().css('color', 'red');
});
</script>

前の兄弟要素を取得する.prev

.prev()は、同階層に存在する前の兄弟要素を取得します。

参照箇所が違う以外の仕様は、基本的に.next()と変わりません。

<ul>
    <li class="ex31">リスト1</li>
    <li class="ex32">リスト2</li><!-- これが赤色になる -->
    <li class="ex33">リスト3</li><!-- この要素の前の兄弟要素を取得 -->
    <li class="ex34">リスト4</li>
    <li class="ex35">リスト5</li>
</ul>

<script>
$(function(){
    $('.ex33').prev().css('color', 'red');
});
</script>

手前以前すべての兄弟要素を取得する.prevAll

.prevAll()は、同階層に存在する手前以前すべての兄弟要素を取得します。

<ul>
    <li class="ex41">リスト1</li><!-- これが赤色になる -->
    <li class="ex42">リスト2</li><!-- これが赤色になる -->
    <li class="ex43">リスト3</li><!-- この要素より前の兄弟要素を取得 -->
    <li class="ex44">リスト4</li>
    <li class="ex45">リスト5</li>
</ul>

<script>
$(function(){
    $('.ex43').prevAll().css('color', 'red');
});
</script>

自身以外のすべての兄弟要素を取得する.siblings

.siblings()は、同階層に存在する自身以外のすべての要素を取得します。

<ul>
    <li class="ex51">リスト1</li><!-- これが赤色になる -->
    <li class="ex52">リスト2</li><!-- これが赤色になる -->
    <li class="ex53">リスト3</li><!-- この要素と同階層と兄弟要素を取得 -->
    <li class="ex54">リスト4</li><!-- これが赤色になる -->
    <li class="ex55">リスト5</li><!-- これが赤色になる -->
</ul>

<script>
$(function(){
    $('.ex53').siblings().css('color', 'red');
});
</script>

以上、jQueryで兄弟要素を取得するソースコード、でした。