ywork2020.com

Title

取得した要素群に呼び出し元の要素を追加する

目次 (INDEX)

addBackとは

ここで説明する addBack とは次の語句からなるjQueryのメソッドです。
add
読み: アド
意味: 足す
back
読み: バック
意味: 戻る、後方へ、後ろに

目次に戻る

addBackメソッドの概要

このメソッドは、他のメソッドの実行により取得した要素群に呼び出し元の要素を追加します。

引数にはセレクターを指定できますが、呼び出し元の要素が引数にマッチしていなければ、追加は行われません。

この追加メソッドを使うことがありそうな、他のメソッドは下記のとおりです。

上記のメソッドらは、兄弟要素を取得するためのメソッドであり、あくまでも一例として挙げているだけなので、状況によって判断してください。

目次に戻る

構文

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

SomeMethod() の部分には何らかのメソッドを使用します。

$(Selector).SomeMethod().addBack([Selector]);

目次に戻る

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

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

この要素のうち、呼び出し元を span 要素とし、その兄弟要素の中からから nextAll("b") を使用して b要素を取得します。 この後に、addBack()を使用することで、取得した b要素群に呼び出し元の要素も追加します。

結果としては、span要素 と b要素を取得したことになり、その要素らの背景色を赤に設定します。

サンプルコード: CSS
<style>
	div b, div q, 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 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>
		< span>span Element< /span>
		<q>q Element</q>
		<b>b Element</b>
		<b>b Element</b>
	</div>
	<button id="idButton">Click</button>
	<script>...</script>
</body>
  • 07: span (span要素です。ここでは、この要素が nextAll() の呼び出し元要素となり、その結果に addBack()を使用します。)
  • 08: q (q要素です。短い引用文を表す要素です)
  • 09, 10: b (b要素です。マークアップとしては無意味ですが、太文字で表されるので注目させる効果があります。)
  • 12: button (ボタンです。クリックすると script 02 ~ 04 のコードが実行されます。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$("div span").nextAll("b").addBack().css("background-color", "##red");
	});
</script>
  • 02-04: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 03: $("div span").nextAll("b") (div 要素の子要素である span 要素の後にある b要素を全て取得します。)
  • 03: nextAll("b").addBack() (nextAll("b")で取得した要素群に、呼び出し元の要素を追加します。)
実行結果:
span Element q Element b Element b Element

目次に戻る