ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryは前の要素を取得できますか?
jqueryは前の要素を取得できますか?
- 青灯夜游オリジナル
- 2022-09-13 17:30:403546ブラウズ
jquery は上位要素を取得できます。取得手順: 1. jQuery セレクターを使用して、指定された要素を選択します。構文 "$("selector")" は、指定された要素を含む jQuery オブジェクトを返します。 2.parent() 関数を使用して、直接の親要素を取得します。指定された要素 (前の要素)、構文は「指定されたオブジェクト.親(フィルター)」で、パラメーター「フィルター」は検索範囲を絞り込むために使用されます。
このチュートリアルの動作環境: 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>
例 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 ビデオ チュートリアル 、Web フロントエンド ビデオ ]
以上がjqueryは前の要素を取得できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。