ywork2020.com

Title

呼び出し元要素の直後にある兄弟要素から指定兄弟要素の直前要素までを取得する

目次 (INDEX)

nextUntilとは

ここで説明する nextUntil とは次の語句からなるjQueryのメソッドです。
next
読み: ネクスト
意味: 次に、次の
until
読み: アンティル
意味: ～まで

目次に戻る

nextUntilメソッドの概要

このメソッドは、引数が空の場合に呼び出し元の要素の後にある全ての兄弟要素をフィルタリングして取得します。

このメソッドの引数にはセレクターが指定できます。 この場合、呼び出し元の要素の直後要素から引数セレクターにマッチした兄弟要素の直前要素までを取得することができます。

目次に戻る

構文

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

$(Selector).nextUntil([filteringSelector]);

目次に戻る

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

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

この要素のうち、span 要素の直後にある要素から q 要素の直前にある要素までを取得して、背景色を赤に設定します。

サンプルコード: CSS 
<style>
	div b, div q, div s, 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 s{
		background-color: ##lightsalmon;
	}
	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>
		<b>b Element</b>
		<s>s Element</s>
		<q>q Element</q>
		<b>b Element</b>
	</div>
	<button id="idButton">Click</button>
	<script>...</script>
</body>
  • 07: span (span要素です。ここでは、この要素の直後の要素から q 要素の直前までの要素を取得して背景色を赤に設定します。)
  • 08, 11: b (b要素です。マークアップとしては無意味ですが、太文字で表されるので注目させる効果があります。)
  • 09: s (s要素です。訂正を表す要素です。)
  • 10: q (q要素です。短い引用文を表す要素です)
  • 13: button (ボタンです。クリックすると script 02 ~ 04 のコードが実行されます。)
サンプルコード: script 
<script>
	$("#idButton").click(function(){
		$("div span").nextUntil("q").css("background-color", "##red");
	});
</script>
  • 02-04: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 03: $("div span").nextUntil("q") (div 要素の子要素である span 要素の直後にある要素から q 要素の直前にある要素までを取得します。)
実行結果:
span Element b Element s Element q Element b Element

このサンプルでは、nextUntil(引数)の引数に "q" を指定して利用しました。 この場合には、呼び出し元要素の直後にある兄弟要素から q 要素の直前にある要素までを参照するためのフィルタリングとなります。

目次に戻る