ホームページ > 記事 > ウェブフロントエンド > jqueryで要素トラバーサルを実装する方法

jqueryで要素トラバーサルを実装する方法

青灯夜游オリジナル: 2022-05-30 15:00:454434ブラウズ

要素トラバーサルを実装するメソッド: 1. Children()、選択した要素のすべての直接の子要素を返すことができます; 2. Closest()、これは選択した要素の最初の祖先要素を返すことができます; 3. each()、一致する要素ごとに関数を実行します; 4. filter()、指定された要素をフィルタリングできます; 5. nextAll() など。

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

jquery は要素を走査するためのさまざまなメソッドを提供します

##メソッド説明add()一致する要素のセットに要素を追加しますaddBack()前の要素セットを追加します現在のコレクションへchildren()選択した要素のすべての直接の子要素を返しますclosest() 選択した要素の最初の祖先要素を返しますcontents()選択した要素のすべての直接の子要素を返します (テキストとコメントノードを含む) ) #each()#end()現在のチェーン内の最新のフィルタリング操作を終了し、一致する要素のセットを前の状態に戻しますeq()選択された要素を含む要素を返します。指定されたインデックス番号一致する要素のセットを、セレクターまたは一致する関数の戻り値に一致する新しい要素に削減します選択した要素の子孫要素を返します選択した要素の最初の要素を返します選択した要素 elements内部に 1 つ以上の要素を持つすべての要素を返しますselector/element/jQuery オブジェクトに基づいて一致する要素のセットを確認し、一致する要素が少なくとも 1 つある場合は true を返します選択した要素の最後の要素を返します現在の一致セットの各要素を関数に渡し、次の内容を含む新しい jQuery を生成します。戻り値 Object選択した要素の次の兄弟要素を返します選択した要素の後のすべての兄弟要素を返します指定された 2 つのパラメータ間の各要素の後の兄弟要素を返しますすべての兄弟要素#not()一致する要素のセットから要素を削除します## の間のすべての祖先要素#prev()選択した要素の前の兄弟要素を返しますprevAll( )すべての兄弟要素を返します選択した要素の前prevUntil()指定された 2 つのパラメータ間のすべての要素を返します選択した要素の前のすべての兄弟要素siblings()選択した要素のすべての兄弟要素を返しますslice()一致する要素のセットをサブセットに縮小します指定された範囲#

子要素を走査するには 2 つのメソッドがあります:

children() メソッド: 要素
# の下にある直接のサブセット要素を取得します。
##find() メソッド: この要素の下にあるすべてのサブセット要素 (サブセットのサブセットを含む) を取得します。

children()メソッドは、選択した要素のすべての直接の子要素を返します (直接の子要素、孫ではなく息子のみを検索します (つまり、再帰的に走査しません)

find( ) メソッドで取得します現在の要素コレクション内の各要素の子孫 (find() メソッドはパラメータを渡す必要があり、渡さないと無効になることに注意してください)

例: すべての子要素をクエリする

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.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で要素トラバーサルを実装する方法

兄弟要素を走査するには 7 つのメソッドがあります:

##next() メソッドの主に、指定された要素の次の兄弟要素を取得するために使用されます
nextAll() メソッド、主に、指定された要素を取得するために使用されます。 element
nextUntil() メソッドの次の兄弟のすべての要素は、主に、指定された要素の次の兄弟要素を取得するために使用されます。この兄弟要素は、次の兄弟要素である必要があります。指定された要素および要素間に要素を設定する nextUntil() メソッドと同じである
prev() メソッド。主に指定された要素の上位レベルの兄弟要素を取得するために使用されます
prevAll() メソッド、主に指定された要素の前のレベルにあるすべての兄弟要素を取得するために使用されます
prevUntil() メソッド、主に取得するために使用されます指定された要素の前の兄弟要素。この兄弟要素は、指定された要素と prevUntil() メソッドで設定された要素の間の要素である必要があります
siblings() メソッド

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<div><span>Hello</span></div>
		<p class="selected">Hello Again</p>
		<p>And Again</p>

		<script>
			$("p").siblings(".selected").css("background", "yellow");
		</script>

	</body>
</html>

next() メソッド jqueryで要素トラバーサルを実装する方法

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li class="third-item">list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
		</ul>

		<script>
			$(&#39;li.third-item&#39;).next().css(&#39;background-color&#39;, &#39;red&#39;);
		</script>

	</body>
</html>

#nextAll() メソッド

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>

		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li class="third-item">list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
		</ul>

		<script>
			$(&#39;li.third-item&#39;).nextAll().css(&#39;background-color&#39;, &#39;red&#39;);
		</script>

	</body>
</html>

#nextUntil() メソッド

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").nextUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
				<li class="start">li (类名为"start"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。</p>

	</body>
</html>

jqueryで要素トラバーサルを実装する方法

prev() メソッド

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prev().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>

	</body>
</html>

jqueryで要素トラバーサルを実装する方法

prevAll() メソッド

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prevAll().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (parent)
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p>

	</body>
</html>

jqueryで要素トラバーサルを実装する方法

prevUntil() メソッド

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prevUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p>

	</body>
</html>

jqueryで要素トラバーサルを実装する方法

[推奨学習:

jQuery ビデオチュートリアル

、 jqueryで要素トラバーサルを実装する方法 webフロントエンドビデオ

]







一致する要素ごとに関数を実行します

	#filter()
	find()
	first()
	has()
	is( )
	last()
	map()
	next()
	nextAll()
	nextUntil()

##offsetParent()	Returns最初に配置された親要素
parent()	選択した要素の直接の親要素を返します
parents()	選択した要素のすべての祖先要素を返します
parentsUntil()	指定された 2 つのパラメータの間を返します

以上がjqueryで要素トラバーサルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jqueryでテーブルの行を追加する方法次の記事：jqueryでテーブルの行を追加する方法

続きを見る