ywork2020.com

Title

呼び出し元要素の直後の要素を取得する

目次 (INDEX)

nextとは

ここで説明する next とは次の語句からなるjQueryのメソッドです。
next
読み: ネクスト
意味: 次に、次の

目次に戻る

nextメソッドの概要

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

このメソッドの引数にはセレクターが指定できますが、指定したからといって直後にある要素が該当しない場合には要素は取得できません。 これは、別の目線で見れば、メソッドの引数にセレクターを指定しておけば、直後の要素が引数に該当するかどうかを調べることが可能です。 この場合、該当する要素が有れば length プロパティは「1」を返します。そうでなければ length プロパティは「0」を返します。

目次に戻る

構文

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

$(Selector).next();
var numberOfMatchElement = $(Selector).next(filteringSelector).length;

目次に戻る

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

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

この要素のうち、span 要素の直後の兄弟要素を取得して、背景色を赤に設定します。

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

このサンプルでは、next()の引数を空にして利用しました。 この場合には、純粋に直後の兄弟要素を参照するためのフィルタリングとなります。

しかし、このメソッドの引数にセレクターとして特定の要素を指定すると、length プロパティから取得した該当要素の数を見ることで、 直後の兄弟要素がセレクターに一致しているかを判別することができます。length が 0 なら、要素はセレクターにマッチしていないことになります。

目次に戻る