JavaScript

jQueryのsiblings()メソッドで兄弟要素を効率的に操作する方法

  /

Web開発の世界では、ユーザーに快適なブラウジング体験を提供するために、ページの要素を動的に制御する技術が不可欠です。
今回は、jQueryの機能の一つであるsiblings()メソッドを使って、特定の要素の兄弟要素を簡単に操作する方法をご紹介します。

指定したタグ要素の兄弟要素タグ全てのCSSを変更してみます。

Contents

はじめに：jQueryとは？

jQueryは、JavaScriptをより簡単に扱えるように設計されたライブラリです。複雑なスクリプトを数行のコードで実現できるため、世界中の開発者に愛用されています。

siblings()メソッドの魔法

siblings()メソッドは、指定した要素の兄弟要素を全て選択するjQueryの機能です。これにより、兄弟要素に対して一括でCSSの変更やイベントの適用などが可能になります。

実際の使い方

CSSでスタイルの基礎を設定

まずは、HTML要素に適用する基本的なスタイルをCSSで定義します。ここでは、フォントファミリーやマージン、パディングなどの基本的なスタイリングを行います。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:30px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  position: relative;
}
ul,ol{
  width: 300px;
  margin: 0 auto;
}
ul li,ol li{
  font-weight: bold;
  margin-bottom: 4px;
}
</style>

HTMLで構造を定義

次に、操作するHTMLの構造を作成します。class=”crnt”を持つタグを中心に、その兄弟要素をどのように変化させたいかに応じてHTMLを記述します。

<h1>class="crnt"タグ要素の兄弟要素タグの文字色と背景色を全て変更します</h1>


<ul>
  <li>長男</li>
  <li class="crnt">次男</li>
  <li>三男</li>
  <li>四男</li>
</ul>

<br>

<ol>
  <li>長女</li>
  <li>次女</li>
  <li>三女</li>
  <li class="crnt">四女</li>
</ol>

jQueryで動的に操作

最後に、jQueryを使って、class=”crnt”を持つ要素の兄弟要素に対して、色や背景色を変更します。
まずは、jquery-2.2.0.min.jsファイルを読み込みます。$(document).ready(function(){…});内に記述することで、ページの読み込みが完了した時点で自動的にこの操作が実行されるようにします。
$(“指定タグ”).siblings()で指定したclass=”crnt”タグの兄弟要素タグの文字色と背景色を変更します。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".crnt").siblings().css({'color':'#006DD9','background-color':'#cccccc'});
});
</script>

【siblings】指定したタグ要素の兄弟要素タグ全てのcssを変更するデモページ

理論だけでなく、実際に動作するデモを見ることで、siblings()メソッドを体感してください。
以下のリンクからデモページにアクセスし、実際の動きを確認できます。

【siblings】指定したタグ要素の兄弟要素タグ全てのcssを変更するデモ

まとめ

jQueryのsiblings()メソッドを使うことで、指定した要素の兄弟要素に対して、効率的かつ簡単にスタイル変更やイベントの適用が可能です。この技術をマスターすることで、よりリッチでインタラクティブなWebページを作成することができるようになります。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

sibling 兄弟要素タグ抽出
関連記事