parentとは
- ここで説明する parent とは次の語句からなるjQueryのメソッドです。
- parent
- 読み: ペアレント
意味: 親
parentメソッドの概要
このメソッドは、子要素の立場から見た親要素の取得を行うことができます。
構文
サンプルを見る前に構文を確認しておきます。
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>
element span