ホーム > jquery > jQuery .add()

jQuery .add()

jQueryリファレンス

ページ内リンク

.add() 動作内容

.add() 構文

サンプルコード

.add() 動作内容

jQueryオブジェクトで指定した要素に対して add( ) の引数で指定した要素を追加します。引数に、セレクタ、エレメント(DOM)、HTML、セレクション、第2引数に、コンテキストを指定することが出来ます。コンテキストを指定することで、追加する要素の範囲を設定することが可能です。

.add() 構文

jQueryオブジェクト.add(引数)

引数	構文	返り値	Ver
セレクタ	.add(セレクタ)	jQueryオブジェクト	Ver1.0
追加要素をセレクタで指定
エレメント(DOM)	.add(エレメント)	jQueryオブジェクト	Ver1.0
追加要素をDOM要素で指定
HTML	.add(HTML)	jQueryオブジェクト	Ver1.0
追加要素をHTML文で指定
jQueryオブジェクト	.add(jQueryオブジェクト)	jQueryオブジェクト	Ver1.3.2
追加要素をjQueryオブジェクトで指定
セレクタ,コンテキスト	.add(セレクタ, コンテキスト)	jQueryオブジェクト	Ver1.4
追加要素をセレクタで指定し、コンテキストでセレクタ検索範囲を指定できます

※jQuery Obj = jQueryオブジェクト

サンプルコード

.add(セレクタ)

追加要素をセレクタで指定します。

ブラウザ
jQuery
css
body
html

$(
	function(){
		$("div#box")
		.css("border", "1px solid #709e43")
		.add("p,span")
		.css("background", "#e1ffc4")
		;
	}
);

function(){

$("div#box")

.css("border", "1px solid #709e43")

.add("p,span")

.css("background", "#e1ffc4")

;

}

);

div#box { width:100px; height:100px;}

1	div#box { width:100px; height:100px;}

<div id="box"></div>
<p>addでstyleが追加</p>
<span>addでstyleが追加</span>

<p>addでstyleが追加</p>

<span>addでstyleが追加</span>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>add jquery サンプル | WEPICKS!</title>
<script src="../../jquery-3.2.1.js"></script>
    
<!-- // ============ jQuery ============ -->
<script type="text/javascript">
$(
	function(){
		$("div#box")
		.css("border", "1px solid #709e43")
		.add("p,span")
		.css("background", "#e1ffc4")
		;
	}
);
</script>
<!-- ============ jQuery ============ // -->

<!-- // ============ css ============ -->
<style type="text/css">
div#box { width:100px; height:100px;}
</style>
<!-- ============ css ============ // -->

</head>
<body>

<!-- // ============ body ============ -->
<div id="box"></div>
<p>addでstyleが追加</p>
<span>addでstyleが追加</span>
<!-- ============ body ============ // -->

</body>
</html>

<!DOCTYPE html>

<head>

<title>add jquery サンプル | WEPICKS!</title>

function(){

$("div#box")

.css("border", "1px solid #709e43")

.add("p,span")

.css("background", "#e1ffc4")

;

}

);

</script>

div#box { width:100px; height:100px;}

</style>

</head>

<body>

<p>addでstyleが追加</p>

<span>addでstyleが追加</span>

</body>

</html>

– サンプル Click Here ! –

.add(セレクタ)

ブラウザ
jQuery
css
body
html

<script type="text/javascript">
$(
	function(){
		//3つ目のdiv要素を取得。順番は「 0 1 2 」
		var domElement = document.getElementsByTagName("div")[2];
		//クリックイベント
		$("button").click(
			//処理
			function(){
				$("span").css("background-color","#cfcfcf").add(domElement).css("border","10px solid #f00");
			}
		)
	}
);
</script>

function(){

//3つ目のdiv要素を取得。順番は「 0 1 2 」

var domElement = document.getElementsByTagName("div")[2];

//クリックイベント

$("button").click(

//処理

function(){

$("span").css("background-color","#cfcfcf").add(domElement).css("border","10px solid #f00");

}

)

}

);

</script>

<style type="text/css">
div,span{
	width:100px;
	height:100px;
	margin:10px;
	background-color:#e1ffc4;
}
span{display:block;}
</style>

div,span{

width:100px;

height:100px;

margin:10px;

background-color:#e1ffc4;

}

span{display:block;}

</style>

<button>click here!</button>
<div>DIV</div>
<span>SPAN</span>
<div>DIV</div>
<span>SPAN</span>
<div>DIV</div>

<button>click here!</button>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>add jquery サンプル | WEPICKS!</title>
<script src="../../jquery-3.2.1.js"></script>
<link rel="stylesheet" href="../../style.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
    
<!-- // ============ jQuery ============ -->
<script type="text/javascript">
$(
	function(){
		//3つ目のdiv要素を取得。順番は「 0 1 2 」
		var domElement = document.getElementsByTagName("div")[2];
		//クリックイベント
		$("button").click(
			//処理
			function(){
				$("span").css("background-color","#cfcfcf").add(domElement).css("border","10px solid #f00");
			}
		)
	}
);
</script>
<!-- ============ jQuery ============ // -->

<!-- // ============ css ============ -->
<style type="text/css">
div,span{
	width:100px;
	height:100px;
	margin:10px;
	background-color:#e1ffc4;
}
span{display:block;}
</style>
<!-- ============ css ============ // -->

</head>
<body>

<!-- // ============ body ============ -->
<button>click here!</button>
<div>DIV</div>
<span>SPAN</span>
<div>DIV</div>
<span>SPAN</span>
<div>DIV</div>
<!-- ============ body ============ // -->

</body>
</html>