ywork2020.com

Title

取得要素に別の要素を後付けする

目次 (INDEX)

addとは

ここで説明する add とは次の語句からなるjQueryのメソッドです。
add
読み: アド
意味: 加える、追加する

目次に戻る

addメソッドの概要

このメソッドは、jQueryセレクターで取得した要素、または要素群に後付けで別の要素を追加することで、新たな要素群として利用することができます。

このメソッドをチェーンの途中に入れることで、新要素を加えた要素群に対して、続くチェーンメソッドを実行することができます。

目次に戻る

構文

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

  • selector = Type: Selector
  • Elements = Type: Element
  • html = Type: htmlString
  • selection = Type: jQuery
  • context = Type: Element

add() の引数には下記のタイプを指定できます。タイプの詳細は上のリストを参照してください。 

$(Selector).add(selector);
$(Selector).add(elements);
$(Selector).add(html);
$(Selector).add(selection);
$(Selector).add(selector, context);

目次に戻る

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

ここでは、構文の .add(selector, context) を使用して要素の後付けを行います。

メソッドの呼び出し元は、div要素群です。 この要素群に「span要素 に包含された b要素」を後付けしています。

サンプルコード: CSS 
<style>
	div, span, b{
		display: block;
		background-color: ##white;
		border: thin solid ##black;
		color: ##black;
		font-weight: normal;
		margin: 1em 0 1em 0;
		padding: 0 1em 0 1em;
		width: 50%;
	}
</style>

細かな説明は省略します。 div と span と b の要素を同じにスタイル設定しています。

サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div>Element DIV 
		< span>Element SPAN< /span>
	</div>
	< span>Element SPAN 
		<b>Element B</b>
	< /span>
	<div>Element DIV 
		<b>Element B</b>
	</div>
	<button id="idButton">Click</button>
	<script>...</script>
</body>
  • 06-08: div (この要素は、子要素に span を持っています。)
  • 09-11: spam (この要素は、子要素に b を持っています。)
  • 12-14: div (この要素は、子要素に b を持っています。)
  • 15: button (ボタンです。クリックすると script 02 ~ 05 のコードが実行されます。)
サンプルコード: script 
<script>
	$("#idButton").click(function(){
		$("div").css("background-color", "##pink")
			.add("b","span").css("color", "##red");
	});
</script>
  • 02-05: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 03-04: これを言葉で説明すると、次のようになります。

    「div 要素群」の背景色はピンクだよ。あと、それに「span要素に包含されたb要素」も付け加えて文字色を赤にしてね。

    結果としては、ボタンをクリックすると、div要素 の背景色をはピンクになり、div要素 と span要素に包含されたb要素 の文字色が赤になります。
実行結果:
Element DIV Element SPAN
Element SPAN Element B
Element DIV Element B

目次に戻る