.siblings()

http://api.jquery.com/siblings/

.siblings( [selector] ) 1.0追加
デモ

.siblings( [selector] ) 1.0追加

戻り値:jQuery

マッチした各要素の兄弟要素を取得します。

引数	説明
[selector]	更に絞り込むためのセレクタを指定します。

次のようなリストがあった場合、

<ul>
   <li>リスト 項目 1</li>
   <li>リスト 項目 2</li>
   <li class="third-item">リスト 項目 3</li>
   <li>リスト 項目 4</li>
   <li>リスト 項目 5</li>
</ul>

下記の処理を実行すると、リスト項目3の兄弟要素全てが対象となり、リスト項目1,2,4,5の背景色が赤くなります。この例では引数は指定されていないので次の要素を確実に取得しますが、もしセレクタが指定されていた場合は、そのセレクタに次の要素がマッチしているか検証が行われます。

$('li.third-item').siblings().css('background-color', 'red');

また、基準となった要素が含まれないことに注意してください。

デモ

ハイライトされている各要素の兄弟要素をフォント色を赤に変更し、その総数を出力しています。

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { float:left; margin:5px; font-size:16px; font-weight:bold; }
  p { color:blue; margin:10px 20px; font-size:16px; padding:5px;
      font-weight:bolder; }
  .hilite { background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li class="hilite">Three</li>
    <li>Four</li>
  </ul>
  <ul>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
  </ul>
  <ul>
    <li>Eight</li>
    <li class="hilite">Nine</li>
    <li>Ten</li>
    <li class="hilite">Eleven</li>
  </ul>
  <p>兄弟要素数: <b></b></p>
<script>
    var len = $(".hilite").siblings()
                          .css("color", "red")
                          .length;
    $("b").text(len);
</script>
</body>
</html>

P要素の兄弟要素でselectedのクラスを持つ要素の背景色を黄色に変更します。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div><span>おはよう</span></div>
<p class="selected">こんにちは</p>
<p>こんばんわ</p>
<script>$("p").siblings(".selected").css("background", "yellow");</script>
</body>
</html>