jqueryを使用してすべての子要素をクエリする方法-フロントエンドQ&A-php.cn

jqueryを使用してすべての子要素をクエリする方法

青灯夜游

リリース： 2022-09-27 17:46:42

オリジナル

9893 人が閲覧しました

jquery では、find() メソッドを使用してすべての子要素をクエリできます。このメソッドは、サブセットのサブセットを含む、指定された要素の下にあるすべてのサブセット要素を取得できます。このメソッドにはパラメータを渡す必要があります。結果として、すべてのサブ要素を検索するにはパラメーターを「*」に設定するだけで済みます。構文は「$(指定された要素).find("*")」です。

jqueryを使用してすべての子要素をクエリする方法

このチュートリアルの動作環境: 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を使用してすべての子要素をクエリする方法