jqueryでのparents()メソッドの使用法は何ですか-フロントエンドQ&A-php.cn

jqueryでのparents()メソッドの使用法は何ですか

青灯夜游

リリース： 2022-03-10 17:24:18

オリジナル

2268 人が閲覧しました

jquery では、parents() メソッドを使用して、現在の一致する要素セット内の各要素の祖先要素を取得します。構文は "$(selector).parents(filter)"、パラメータは "filter" です。 " はオプションです。祖先要素の検索を絞り込むセレクター式を指定します。

jqueryでのparents()メソッドの使用法は何ですか

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jquery では、parents() メソッドを使用して、現在の一致する要素セット内の各要素の祖先要素を取得します。

先祖とは、父、祖父、曾祖父などです。

DOM ツリー: このメソッドは、親要素から DOM 要素の祖先を経由してドキュメントルート要素 () までのすべてのパスをたどります。

#構文

$(selector).parents(filter)

ログイン後にコピー

パラメータ説明オプション。祖先要素の検索を絞り込むセレクター式を指定します。


フィルター	注: 複数の祖先を返すには、コンマを使用して各式を区切ります。

注: filter パラメーターが空の場合、このメソッドは、直接の親要素からおよび < までのすべてのパスからコレクション内のすべての要素を選択します。 html> の祖先。したがって、検索結果を絞り込むセレクター式を渡すと便利です。

例 1: のすべての祖先要素を返す:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (曾曾祖父节点)
	<div style="width:500px;">div (曾祖父节点)
		<ul>ul (祖父节点)  
			<li>li (直接父节点)
				<span>span</span>
			</li>
		</ul>   
	</div>
</body>

<!-- body元素之前的外部红色的边框,是html元素(也是一个祖先节点)。-->
</html>

ログイン後にコピー

jqueryでのparents()メソッドの使用法は何ですか

例 2: 検索範囲を狭める

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("span").parents("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (曾曾祖父节点)
	<div style="width:500px;">div (曾祖父节点)
		<ul>ul (祖父节点)  
			<li>li (直接父节点)
				<span>span</span>
			</li>
		</ul>   
	</div>
</body>

</html>

ログイン後にコピー

jqueryでのparents()メソッドの使用法は何ですか