ywork2020.com

Title

現在のチェーンのフィルターを解除する

目次 (INDEX)

endとは

ここで説明する end とは次の語句からなるjQueryのメソッドです。
end
読み: エンド
意味: 終わり

目次に戻る

endメソッドの概要

このメソッドは、jQueryオブジェクトの現在のチェーンのフィルター処理を解除します。

例えば、$(セレクター)を使って 要素群 を参照した後に、更にフィルター系のメソッドで要素を絞り込んだ場合、 end()を使うと、そのフィルターチェーンを解除して、同じチェーンの中で元の 要素群 を参照しなおすことができます。

なお、この end() は引数を受け付けません。

目次に戻る

構文

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

$(Selector_A) = $(Selector_A).filter(Selector_B).end();

目次に戻る

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

ここでは、セレクターで div要素群を参照したチェーンを題材にします。

このチェーンでは最初の filter() で、 .clsRed をフィルタリングした要素群に css() で背景色の赤を設定します。 ここでは、この後に end() でフィルターを解除して、新しい filter() でチェーンを続けています。

もしも、end() を使わなかった場合は 最初の css() の部分で、このチェーンを終了して、新しいチェーンを始める必要があります。

サンプルコード: CSS 
<style>
	div{
		display: table-cell;
		color: ##white;
		background-color: ##black;
		border: thin solid ##gray;
		height: 50px;
		width: 50px;
		text-align: center;
		vertical-align: middle;
	}
	#idButton{
		margin-top: 1em;
	}
</style>
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div class ="clsRed">R</div>
	<div class ="clsGreen">G</div>
	<div class ="clsBlue">B</div>
	<div class ="clsRed">R</div>
	<div class ="clsGreen">G</div>
	<div class ="clsBlue">B</div>
	<button id="idButton">Click</button>
	<script>...</script>
</body>
  • 06 ~ 11: div (div要素を6つ用意しました。各要素にはclass属性を付けて3種類のグループを形成しています。)
  • 07: button (ボタンです。クリックするとscript 03: ~ 12: のコードが実行されます。)
サンプルコード: script 
<script>
	$("#idButton").click(function(){
		$("div")
			.filter(".clsRed")
				.css("background-color", "##red")
			.end()
			.filter(".clsGreen")
				.css("background-color", "##green")
			.end()
			.filter(".clsBlue")
				.css("background-color", "##blue")
			.end();
	});
</script>
  • 02-13: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 03: チェーン開始 (セレクターでdiv要素を参照します。)
  • 04: .filter(".clsRed") (フィルターを使って div 要素の中から、class="clsRed" の要素のみを参照します。)
  • 05: .css("background-color", "red") (フィルタリング参照した要素の背景色を赤色に設定します。)
  • 06: .end() (このチェーンのフィルター系メソッドを解除します。つまり、04行目のフィルターを解除するので要素の参照は03行目の状態に戻ります。)
  • 07: .filter(".clsGreen") (フィルターを使って div 要素の中から、class="clsGreen" の要素のみを参照します。)
  • 08: .css("background-color", "green") (フィルタリング参照した要素の背景色を緑色に設定します。)
  • 09: .end() (このチェーンのフィルター系メソッドを解除します。つまり、04行目のフィルターを解除するので要素の参照は03行目の状態に戻ります。)
  • 10: .filter(".clsBlue") (フィルターを使って div 要素の中から、class="clsBlue" の要素のみを参照します。)
  • 11: .css("background-color", "blue") (フィルタリング参照した要素の背景色を青色に設定します。)
  • 12: .end() (このチェーンのフィルター系メソッドを解除します。つまり、04行目のフィルターを解除するので要素の参照は03行目の状態に戻ります。)
  • 06, 09, 12: まとめ (これは同じ処理を行っています。 end() を実行した時点でフィルターを解除するということは、end() の後のチェーン中の要素の参照は $("div") に戻るということです。)
実行結果:
R
G
B
R
G
B

目次に戻る