ywork2020.com

Title

呼び出し元の要素の兄弟要素を取得する

目次 (INDEX)

siblingsとは

ここで説明する siblings とは次の語句からなるjQueryのメソッドです。
siblings
読み: シブリングス
意味: 兄弟

目次に戻る

siblingsメソッドの概要

このメソッドは、引数が空の場合に呼び出し元の要素の全ての兄弟要素をフィルタリングして取得します。

このメソッドの引数にはセレクターが指定できます。 この場合、呼び出し元の要素の兄弟要素の中から、引数セレクターにマッチした要素を取得することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。 

$(Selector).siblings([filteringSelector]);

目次に戻る

サンプルコードと実行結果

このサンプルでは、div 要素の子要素である b, q, s, span の4要素を題材にします。

この要素のうち、呼び出し元を span 要素とし、その兄弟要素の中からから b 要素を取得して、背景色を赤に設定します。

サンプルコード: CSS 
<style>
	div b, div q, div s, div span{
		display: inline-block;
		border: thin solid ##lightgray;
		margin: 0.2em;
		padding: 0.2em;
	}
	div b{
		background-color: ##lightpink;
	}
	div q{
		background-color: ##lightgreen;
	}
	div s{
		background-color: ##lightsalmon;
	}
	div span{
		background-color: ##lightblue;
	}
</style>
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div>
		<b>b Element</b>
		<s>s Element</s>
		< span>span Element< /span>
		<q>q Element</q>
		<b>b Element</b>
	</div>
	<button id="idButton">Click</button>
	<script>...</script>
</body>
  • 07, 11: b (b要素です。ここでは、この要素を siblings() の引数セレクターに指定します。)
  • 08: s (s要素です。訂正を表す要素です。)
  • 09: span (span要素です。ここでは、この要素が siblings() の呼び出し元要素となります。)
  • 10: q (q要素です。短い引用文を表す要素です)
  • 13: button (ボタンです。クリックすると script 02 ~ 04 のコードが実行されます。)
サンプルコード: script 
<script>
	$("#idButton").click(function(){
		$(".result div span").siblings("b").css("background-color", "##red");
	});
</script>
  • 02-04: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 03: $("div span").siblings("b") (div 要素の子要素である span 要素の兄弟要素の中から b 要素だけを取得します。)
実行結果:
b Element s Element span Element q Element b Element

目次に戻る