jqueryは前の要素を取得できますか?-フロントエンドQ&A-php.cn

jqueryは前の要素を取得できますか?

青灯夜游

リリース： 2022-09-13 17:30:40

オリジナル

3515 人が閲覧しました

jquery は上位要素を取得できます。取得手順: 1. jQuery セレクターを使用して、指定された要素を選択します。構文 "$("selector")" は、指定された要素を含む jQuery オブジェクトを返します。 2.parent() 関数を使用して、直接の親要素を取得します。指定された要素 (前の要素)、構文は「指定されたオブジェクト.親(フィルター)」で、パラメーター「フィルター」は検索範囲を絞り込むために使用されます。

jqueryは前の要素を取得できますか?

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

上位要素の取得とは、親要素の取得です。 jquery では、parent() 関数を使用して親要素を取得できます。

実装手順

ステップ 1: jQuery セレクターを使用して、指定された要素を選択します

1) jQuery 要素セレクター要素選択した要素の名前に基づきます。

$("标签名")

ログイン後にコピー

2) jQuery ID セレクターは、id 属性に基づいて要素を選択します。

$("#id属性值")
<form id="属性值">
//表单元素
</form>

ログイン後にコピー

は、指定された要素を含む jQuery オブジェクトを返します。

ステップ 2:parent() 関数を使用して、指定した要素の親要素を取得します。

parent() は、選択した要素の直接の親要素を返します。このメソッドは、DOM ツリーの上の 1 レベルのみをトラバースします。

指定对象.parent(filter)

ログイン後にコピー

パラメータ	説明
フィルタ	できる選択する。親要素の検索を絞り込むセレクター式を指定します。

例 1: 要素の上位レベルの要素を返す

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				 $("span").parent("li").css({"color":"red","border":"2px solid red"});
			});
		</script>
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>

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

</html>

ログイン後にコピー

jqueryは前の要素を取得できますか?

例 2: フィルターパラメーターを使用して検索範囲を絞り込む

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("span").parent("li.1").css({"color":"red","border":"2px solid red"});
			});
		</script>
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>

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

ログイン後にコピー

jqueryは前の要素を取得できますか?