連載
» 2009年10月09日 00時00分 公開

連載:jQuery逆引きリファレンス:第1回 セレクタ編 (10/25)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 「prev ~ next」のようにセレクタを「~」区切りで指定した場合、prevで合致した要素以降の兄弟要素であるnextを取り出します。

 以下はid値が「base」である要素の弟要素として登場する<span>要素に対して、枠線を追加します。

<script type="text/javascript">

$(function() {
  $('#base ~ span').css('border', 'solid 1px #FF0000');
});

</script>

……中略……

<span>兄要素なので除外</span>

<p id="base">自分自身</p>

<span>弟要素なので適用(1)</span>

<p>
  <span>子供要素なので除外</span>
</p>

<span>弟要素なので適用(2)</span>

<div>弟要素だけどdiv要素</div>

リスト009 指定した要素以降の兄弟要素を取得(Sibling.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト009の実行結果

 id="base"である要素と「同列で、かつ、後ろ」に登場する<span>要素に枠線が付いていることが確認できます。「<span>子供要素……</span>」は<p id="base">要素と同じ階層ではありませんので、「#base ~ span」にはマッチしません。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。