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

以前、当サイトで、

jQueryを扱うにあたっては、今回紹介する「セレクタ」の使い方がポイントとなります。
jQuery 初心者向け「セレクタ」の使い方入門編まずはこれだけ抑えればOK！ - shiru-web.com

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

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

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


<ul id="parent">
	<li>リスト１</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()」で取得できます。

うん、簡単簡単！

Tags: jQuery

shirushiru: