ywork2020.com

Title

親要素を取得する

目次 (INDEX)

parentとは

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

目次に戻る

parentメソッドの概要

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

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

目次に戻る

構文

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

var elmParent = $(childSelector).parent();

目次に戻る

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

ここでは、子要素に span を使用し、親要素に div を使用しました。 子要素の立場から見て、親要素を特定し、CSSの設定とid属性の値の取得を行っています。

サンプルコード: CSS 
<style>
	#idParent{
		display: table-cell;
		border: medium solid ##tomato;
		text-align: center;
		vertical-align: middle;
		width: 200px;
		height: 200px;
	}
	#idChild{
		background-color: ##gold;
		border: medium solid ##lightslategray;
		padding: 1em;
	}
</style>
サンプルコード: HTML 
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="idParent">
		< span id="idChild">element span< /span>
	</div>
</body>
  • 05-07: div (親要素です。この要素をparent()で取得します。)
  • 06: span (子要素です。この要素の親をparent()で取得します。)
サンプルコード: script 
<script>
	let elmParent = $("#idChild").parent();
	elmParent.css("background-color", "##lightpink").after(elmParent.attr("id"));
</script>
  • 02: elmParent (この変数から親要素を参照できるようになります。)
  • 03: css() (CSSの設定を行います。要素の背景色をライトピンクに設定しています。)
  • 03: after() (親要素の直後に id の値を書き出します。)
実行結果:
element span

目次に戻る