【jQuery】兄弟要素の取得・操作 -自分以外、自分より前、自分より後-

以前、当サイトで、



っていう記事を書きました。
「これだけおさえれば」って自信持って吐かしたのですが、若干足りないことに気づきました。ええ。すみません。。

一つ、よく使うやつです。
jQueryで兄弟要素を取得する系のはなし。

とりあえず、共通のhtmlは下記とします。

<ul id="parent">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>


例として、どれかの「li」要素をクリックした際に、文字色を兄弟要素の文字色を変えるという設定で、それぞれのjQueryを見ていきます。

自分以外の兄弟の要素を取得

$('#parent').children().click(function(){
$(this).siblings().css({'color':'#ccc'});
$(this).css({'color':'#000'});
});


自分以外の兄弟要素は、「siblings()」で取得できます。

自分の次の兄弟要素を取得

$('#parent').children().click(function(){
$(this).next().css({'color':'red'});
});


自分の一つ後の兄弟要素は、「next()」で取得できます。
ちなみに、「next(’要素名’)」とすると、要素を絞り込んで取得することができます。

自分より後の兄弟要素全てを取得

$('#parent').children().click(function(){
$(this).nextAll().css({'color':'red'});
});


自分の一つ後の兄弟要素は、「nextAll()」で取得できます。

自分より一つ前の兄弟要素を取得

$('#parent').children().click(function(){
$(this).prev().css({'color':'red'});
});


自分より一つ前の兄弟要素は、「prev()」で取得できます。
next同様、「prev(’要素名’)」とすると、要素を絞り込んで取得することができます。

自分より前の兄弟要素全てを取得

$('#parent').children().click(function(){
$(this).prevAll().css({'color':'red'});
});


自分より前の全ての兄弟要素は、「prevAll()」で取得できます。


うん、簡単簡単!

あわせて読みたい