ywork2020.com

Title

指定先祖要素までの間にある全要素を取得する

目次 (INDEX)

parentsUntilとは

ここで説明する parentsUntil とは次の語句からなるjQueryのメソッドです。
parent
読み: ペアレント
意味: parents: 親の複数形
until
読み: アンティル
意味: ~まで

目次に戻る

parentsUntilメソッドの概要

このメソッドは、呼び出し元の子要素の立場から見た指定先祖要素までの間にある全要素を取得することができます。

前述の文では少し表現が複雑に感じるかもしれませんが、つまり、呼び出し元の子要素と引数に指定した先祖要素はこの中に含まれず、 その間にある全要素を取得するということです。

引数にはセレクターを指定できます。この場合、セレクターにマッチした一番近い先祖要素までの間にある全ての要素を取得します。 また、引数が空の場合には全ての先祖要素を対象とするので一番古い先祖要素までの間にある全ての要素を取得します。

引数には第2引数がオプションとしてあり、同じくセレクター (フィルター) を指定できます。これは除外するべき要素を指定することができます。

目次に戻る

構文

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

$(Selector).parentsUntil([selector] [, filter ])

目次に戻る

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

ここでは、メソッドの呼び出し元を span要素とします。

span の親に li要素、その親に ul要素、またその親に div要素を配置し、メソッドで先祖の中から 一番近いdiv要素までの間にある全要素を取得して、背景色を赤に設定します。

サンプルコード: CSS
<style>
	div, ul, li, b, span{
		display: block;
		border: medium solid ##black;
		background-color: ##white;
		margin: 0.3em;
		padding: 0.3em;
	}
	#idSpan{
		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>
		<div>
			<ul>
				<li><b>b Element</b></li>
				<li>< span id="idSpan">span Element< /span></li>
				<li><b>b Element</b></li>
			</ul>
		</div>
		<button id="idButton">Click</button>
	</div>
	<script>...</script>
</body>
  • 10: span (id="idSpan"の要素です。この要素が、parentsUntil()の呼び出し元です。)
  • 14: button (ボタンです。クリックすると script 02 ~ 04 のコードが実行されます。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$("#idSpan").parentsUntil("div").css("background-color", "##red");
	});
</script>
  • 02-04: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 03: $("#idSpan").parentsUntil("div") (識別子 idSpanを持つ要素の先祖要素の中から一番近い divまでの全要素を取得します。ただし、指定したdivは含まれません。)
実行結果:
div
div
    ul
  • lib Element
  • lispan Element
  • lib Element

目次に戻る