jQuery 兄弟要素の取得と操作 – 自分以外の兄弟、自分以降の兄弟、自分以前の兄弟等

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回のTipは【jQuery 兄弟要素の取得と操作 – 自分以外の兄弟、自分以降の兄弟、自分以前の兄弟等】です。兄弟関係は出現頻度が高いのでメモしておきますね。他にも色々実装する方法がありますが以下の方法が一番シンプルかと思います。

まずは自分以外の兄弟要素を操作する方法です。兄弟関係の中から一つクリックで実行としています。自分以外を対象とする場合【siblings()】を使用します。

<ul id="ex">
	<li>list</li>
	….
	<li>list</li>
	<li>list</li>
</ul>

$(‘#ex’).children().click(function(){
	$(this).siblings().css({‘background’:’#007374′});
	$(this).css({‘background’:’none’});
});

自分直前（一つ前）の兄弟<を対象とする場合【next()】を使用します。 [js]$('#ex').children().click(function(){ $(this).next().css({'background':'#007374'}); });[/js]

自分以前の全ての兄弟を対象とする場合【nextAll()】を使用します。

$(‘#ex’).children().click(function(){
	$(this).nextAll().css({‘background’:’#007374′});
});

自分直後（一つ後）の兄弟を対象とする場合【prev()】を使用します。

$(‘#ex’).children().click(function(){
	$(this).prev().css({‘background’:’#007374′});
});

自分以降の全ての兄弟を対象とする場合【prevAll()】を使用します。

$(‘#ex’).children().click(function(){
	$(this).prevAll().css({‘background’:’#007374′});
});

　
以上になります。あまり意味がないかもしれませんが…一応デモも用意しておきましたので、動作等確認する際はご参照ください。