搜尋

首頁 >web前端 >前端問答 >jquery怎麼實現元素遍歷

jquery怎麼實現元素遍歷

青灯夜游
青灯夜游原創
2022-05-30 15:00:454454瀏覽

實作元素遍歷的方法：1、children()，可傳回所有被選元素的直接子元素；2、closest()，可傳回被選元素的第一個祖先元素；3、each ()，為每個匹配元素執行函數；4、filter()，可過濾指定元素；5、nextAll()等。

jquery怎麼實現元素遍歷

本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。

jquery提供了多種遍歷元素的方法

##說明##add()把元素加入到符合元素的集合中#addBack()把先前的元素集新增到目前集合中children()傳回被選取元素的所有直接子元素closest() 傳回被選元素的第一個祖先元素contents()傳回被選元素的所有直接子元素（包含文字和註解節點）each()為每個符合元素執行函數##offsetParent()傳回第一個定位的父元素parent()#傳回被選元素的直接父元素#parents()傳回所有被選元素的祖先元素#parentsUntil()prev()##prevAll( )傳回被選元素之前的所有同級元素prevUntil()傳回介於兩個給定參數之間的每個元素之前的所有同級元素
#方法
##end() 結束目前鏈中最近的一次篩選操作，並把匹配元素集合回到前一次的狀態
#eq() 傳回帶有被選元素的指定索引號的元素
filter() 把匹配元素集合縮減為匹配選擇器或匹配函數傳回值的新元素
find() 傳回被選元素的後代元素
#first() 傳回被選元素的第一個元素
has() 傳回擁有一個或多個元素在其內的所有元素
is( ) 根據選擇器/元素/jQuery 物件檢查匹配元素集合，如果存在至少一個匹配元素，則傳回true
last() 傳回被選元素的最後一個元素
map() 把目前符合集合中的每個元素傳遞給函數，產生包含傳回值的新jQuery物件
next() 返回被選中元素的後一個同級元素
nextAll() 傳回被選元素之後的所有同級元素
nextUntil() 傳回介於兩個給定參數之間的每個元素之後的所有同級元素
not() 從符合元素集合移除元素
##會傳回介於兩個給定參數之間的所有祖先元素
傳回被選元素的前一個同級元素
#########siblings()######返回被選元素的所有同級元素############ slice()######把匹配元素集合縮減為指定範圍的子集#############

其中，用於遍歷子元素的有兩個：

  • #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種：

  • #siblings()方法，主要用來取得指定元素的同級所有元素

  • next()方法，主要用於取得指定元素的下一個同級元素

  • nextAll()方法，主要用於獲得指定元素的下一個同級的所有元素

  • 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>

jquery怎麼實現元素遍歷

next()方法

<!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>

jquery怎麼實現元素遍歷

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>

jquery怎麼實現元素遍歷

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影片教學、web前端影片】#

以上是jquery怎麼實現元素遍歷的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：jquery怎麼增加一行表格下一篇：jquery怎麼增加一行表格

相關文章

看更多