jQueryで兄弟要素を指定するsiblings()

jQuery
スポンサーリンク

jQueryで兄弟要素を簡単に選択する命令があることを初めてしりましたのでメモ。

確認環境

  • jQuery 1.9.1
  • Google Chrome 30.0.1599.101

使い方

指定した要素に対して、.siblings()をチェーンでつなげてください。

コード

<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

文字列をクリックすると、クリックした要素の兄弟要素(li)が赤くなります。

* 文字列1
* 文字列2
* 文字列3
* 文字列4
* 文字列5

<button id="reset">黒に戻す</button>

<script>$(function(){ //クリックした兄弟要素(siblings)を赤くする $('#sample li').on({ //マウスを指に 'mouseover': function(){ $(this).css('cursor','pointer'); }, 'click': function(){ //クリックした要素の兄弟要素を赤くする $(this).siblings().css('color', 'red'); } }); //文字色を全て黒に戻す $('#reset').on('click', function(){ $('#sample li').css('color', 'black'); }); });</script>

デモ

jqueryで兄弟要素を指定するsiblings()デモ