ywork2020.com

Title

呼び出し元要素の前にある兄弟要素を全て取得する

目次 (INDEX)

prevAllとは

ここで説明する prevAll とは次の語句からなるjQueryのメソッドです。
previous
読み: プリビオス
意味: 前に、以前の
all
読み: オール
意味: 全て

目次に戻る

prevAllメソッドの概要

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

このメソッドの引数にはセレクターが指定できます。 この場合、引数セレクターにマッチした兄弟要素のみ取得することができます。

目次に戻る

構文

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

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

目次に戻る

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

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

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

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

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

また、参考までに下記に b と q を引数セレクターに指定して、lengthプロパティから取得した要素数を掲載しておきます。

目次に戻る