ホームページ > 記事 > ウェブフロントエンド > jqueryを使用してすべての子要素をクエリする方法
jqueryを使用してすべての子要素をクエリする方法
- 青灯夜游オリジナル
- 2022-04-15 12:11:249870ブラウズ
jquery では、find() メソッドを使用してすべての子要素をクエリできます。このメソッドは、サブセットのサブセットを含む、指定された要素の下にあるすべてのサブセット要素を取得できます。このメソッドにはパラメータを渡す必要があります。結果として、すべてのサブ要素を検索するにはパラメーターを「*」に設定するだけで済みます。構文は「$(指定された要素).find("*")」です。
このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。
jquery では、子要素を検索する方法が 2 つあります。
children() メソッド: 要素の下にある直接のサブセット要素を取得します
find() メソッド: 要素
の下にあるすべてのサブセット要素 (サブセットのサブセットを含む) を取得します。その中で、すべてのサブ要素をクエリしたい場合は、次の操作のみが可能です。 find() メソッドを使用します。
find() メソッドは、選択した要素の子孫要素を返します。 (子孫とは、子、孫、ひ孫などです。)
DOM ツリー: このメソッドは、DOM 要素の子孫から最後の子孫までのすべてのパスをたどります (< ;html> ）。
構文:
$(selector).find(filter)
| パラメータ | 説明 |
|---|---|
| フィルター | 必須。検索子孫をフィルター処理するセレクター式、要素、または jQuery オブジェクト。 注: 複数の子孫を返すには、コンマを使用して各式を区切ります。 |
説明: フィルター パラメーターは、検索結果をフィルターするために使用されます。すべてのサブ要素を検索するには、パラメーターを "*" に設定するだけです。
例: すべての子要素をクエリする
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.6.1.min.js"></script>
<style>
div * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("ul").find("*").css({
"color": "red",
"border": "2px solid red"
});
});
});
</script>
</head>
<body class="ancestors">
<div style="width:500px;">div (父节点)
<ul>ul (指定元素)
<li>li (子节点1)
<span>span (孙节点1)</span>
</li>
<li>li (子节点2)
<span>span (孙节点2)</span>
</li>
<li>li (子节点3)
<span>span (孙节点3)</span>
</li>
</ul>
</div>
<button>选取ul的所有子元素</button>
</body>
</html>
[推奨学習: jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ]
以上がjqueryを使用してすべての子要素をクエリする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。