jquery怎麼實現元素遍歷-前端問答-PHP中文網

jquery怎麼實現元素遍歷

青灯夜游

發布： 2022-05-30 15:03:11

原創

4307 人瀏覽過

實作元素遍歷的方法：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（）方法，必須傳參數，否者無效）

範例：查詢所有子元素



	
		
		
		

		
	


	
		div (父节点)
			ul (指定元素)
				li (子节点1)
					span (孙节点1)
				
				li (子节点2)
					span (孙节点2)
				
				li (子节点3)
					span (孙节点3)

登入後複製

jquery怎麼實現元素遍歷

遍歷同級元素的方法有7種：

#siblings()方法，主要用來取得指定元素的同級所有元素
next()方法，主要用於取得指定元素的下一個同級元素
nextAll()方法，主要用於獲得指定元素的下一個同級的所有元素
nextUntil()方法，主要用於獲得指定元素的下一個同級元素，這個同級元素必須為指定元素與nextUntil( )方法所設定元素之間的元素
prev()方法，主要用於取得指定元素的上一層同級元素
prevAll()方法，主要用於獲得指定元素上一級所有的同級元素
#prevUntil()方法，主要用於獲得指定元素的上一個同級元素，這個同級元素必須為指定元素與prevUntil()方法設定元素之間的元素

#siblings()方法

Hello

Hello Again

And Again

登入後複製

jquery怎麼實現元素遍歷

next()方法



	
		
	


	
		
			list item 1
			list item 2
			list item 3
			list item 4
			list item 5

登入後複製

jquery怎麼實現元素遍歷

nextAll()方法



	
		
	


	

		
			list item 1
			list item 2
			list item 3
			list item 4
			list item 5

登入後複製

jquery怎麼實現元素遍歷

nextUntil()方法



	
		
		
		
	

	

		
			ul (父节点)
				li (兄弟节点)
				li (兄弟节点)
				li (类名为"start"的兄弟节点)
				li (类名为"start"的li节点的下一个兄弟节点)
				li (类名为"start"的li节点的下一个兄弟节点)
				li (类名为"start"的li节点的下一个兄弟节点)
				li (类名为"stop"的兄弟节点)
			
		
		在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。

登入後複製

jquery怎麼實現元素遍歷

prev()方法



	
		
		
		
	

	

		
			ul (父节点)
				li (兄弟节点)
				li (类名为"start"的li节点的上一个兄弟节点)
				li (类名为"start"的li节点)
				li (兄弟节点)
				li (兄弟节点)

登入後複製

jquery怎麼實現元素遍歷

#prevAll()方法



	
		
		
		
	

	

		
			ul (parent)
				li (类名为"start"的li的上一个兄弟节点)
				li (类名为"start"的li的上一个兄弟节点)
				li (类名为"start"的li的上一个兄弟节点)
				li (类名为"start"的li节点)
				li (兄弟节点)
				li (兄弟节点)
			
		
		在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。

登入後複製

jquery怎麼實現元素遍歷

prevUntil()方法



	
		
		
		
	

	

		
			ul (父节点)
				li (类名为"stop"的兄弟节点)
				li (类名为"start"的li节点的上一个兄弟节点)
				li (类名为"start"的li节点的上一个兄弟节点)
				li (类名为"start"的li节点的上一个兄弟节点)
				li (类名为"start"的li节点)
				li (兄弟节点)
				li (兄弟节点)
			
		
		在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。