ホーム > jquery > jQuery .addBack()

jQuery .addBack()

jQueryリファレンス

ページ内リンク

.addBack() 動作内容

.addBack() 構文

サンプルコード

.addBack() 動作内容

現在の選択一致している要素と、さらに1つ前でマッチした要素を追加（マージ）します。1つ前というのは、next( ) や nextAll( ) などの Traversalメソッドが実行され選択されている要素セットが移動した場合に、現在の1つ前の要素セットという意になります。また、addBack( ) の引数で指定したセレクタでフィルタリングが可能です。

jQueryオブジェクトは内部スタックに現在までにマッチしてきた要素セットの履歴を保存しています。next( ) や nextAll( ) などの Traversalメソッドを実行すると内部スタックに新しい要素セットが追加されます。addBack( ) を呼び出すことで、要素セットの履歴から現在の1つ前の要素セットを追加することが出来ます。

.addBack() 構文

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

引数	構文	返り値	Ver
セレクタ	.addBack(セレクタ)	jQueryオブジェクト	Ver1.8
セレクタを指定することでフィルタリングが可能です。

サンプルコード

.addBack()

現在の選択一致要素は、 $("p.third-p") なので、p item 3 が現在の要素です。.next().next().next() が3つ並んで、6番目のp要素に移動します。さらに .addBack() で1つ前の要素が追加されます。最終的に5番目と6番目のp要素が選択されます。 click here !! ボタンをクリックすると、p item 5 と p item 6 の背景色が青く反転します。

ブラウザ
jQuery
body
html

$(
	function () {
		$("button").click(function(){
			$("p.third-p").next().next().next().addBack().css("background-color","#4286f4");
			}
		)
	}
);

function () {

$("button").click(function(){

$("p.third-p").next().next().next().addBack().css("background-color","#4286f4");

}

)

}

);

<button>click here !!</button>
<p>p item 1</p>
<p>p item 2</p>
<p class="third-p">p item 3</p>
<p>p item 4</p>
<p>p item 5</p>
<p>p item 6</p>
<p>p item 7</p>
<p>p item 8</p>

<button>click here !!</button>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>addBack jQuery サンプル | WEPICKS!</title>
<script src="../../jquery-3.2.1.js"></script>
    
<!-- // =========================== jquery =========================== -->
<script type="text/javascript">
$(
	function () {
		$("button").click(function(){
			$("p.third-p").next().next().next().addBack().css("background-color","#4286f4");
			}
		)
	}
);
</script>
<!-- =========================== jquery =========================== // -->

</head>
<body>

<!-- // =========================== body ここから =========================== -->
<button>click here !!</button>
<p>p item 1</p>
<p>p item 2</p>
<p class="third-p">p item 3</p>
<p>p item 4</p>
<p>p item 5</p>
<p>p item 6</p>
<p>p item 7</p>
<p>p item 8</p>
<!-- =========================== body ここまで =========================== // -->

</body>
</html>