ywork2020.com

Title

先祖要素を取得する

目次 (INDEX)

parentsとは

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

目次に戻る

parentsメソッドの概要

このメソッドは、子要素の立場から見た先祖要素の取得を行うことができます。

引数にはセレクターを指定できます。この場合、セレクターにマッチした先祖要素を全て取得します。 また、引数が空の場合には全ての先祖要素を取得します。

子要素が、 idclass などにより簡単に特定できる場合は、このメソッドは便利です。

目次に戻る

構文

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

var elmParents = $(childSelector).parents([Selector]);

目次に戻る

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

ここでは、メソッドの呼び出し元を 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"の要素です。この要素が、parents()の呼び出し元です。)
  • 14: button (ボタンです。クリックすると script 02 ~ 04 のコードが実行されます。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$("#idSpan").parents("div").css("background-color", "##red");
	});
</script>
  • 02-04: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 03: $("#idSpan").parents("div") (識別子 idSpanを持つ要素の先祖要素の中から div要素を取得します。)
実行結果:
div
div
    ul
  • lib Element
  • lispan Element
  • lib Element

目次に戻る