jquery查找父元素 子元素（个人总结）

使用js或者jquery查找父元素、子元素经常遇到。可是用起来总容易混淆，这里统一总结了一下，以后用起来相信会方便好多

这里jquery向上查找父元素 用到的方法：closest()    parents()    parent()

                   向下查找子元素 用到的方法：find()    children()

js用的是 children[]    属性

html代码

**********包含div1的父级元素 div0**********



段落1 查找父元素





	

		
11closest()向上查找最近的元素（返回零个或一个元素的 jQuery 对象）
		
	
	
	

		
12parent()方法
	
	
	

		
13parents("选择器")方法
	

	







段落2 查找子元素

	

		

			
查找table2的td find()方法
		
		
 
			
查找table2的td children()方法
		
		

			
js的children[]属性来查找
		
		
	
	
	

		

			
tbody2-2
		
	






分析：

closest()：从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。这个应该没有什么疑问。
parent():取得一个包含着所有匹配元素的唯一父元素的元素集合。	

 

 

js代码：

 

 

 

总结：

closest()
一层一层向上找，返回最先匹配上的元素。
$(this).closest("td")
$("td").closest("tbody")
因为td是多个元素，所有最先匹配上的tbody也是多个

parent()返回唯一父元素（即：向上只找一层）。如果选择器选择多个对象，则返回父元素数组。需要在数组里面继续选择，则使用parent("#id")，parent(".className")
什么是唯一父元素：td的父亲是tr,tr的父亲是tbody,tbody的父元素是table...
eg:
$("tr").parent() 一个或者多个tbody
$("table").parent("#div1");//div1。

parents()
一层一层向上找，返回所有匹配上的元素。

find()
$("#table2").find("td")和$("#table2 td")效果一样，这一句话应该足够了。

children()和parent()反之。
每一个元素的所有子元素的元素集合。
$("div[name='mydiv']").children()
p table1 p table2

 

children属性和jquery的children()类似，返回紧挨的下一级并列的子元素

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

对象都是this的话，可能更容易理解：

closest(“”) 一层一层向上，找到一个匹配就返回

parent()  紧挨自己的上一个元素

parents() 一层一层向上，找到所有的

 

find()

$("#table2").find("td")   eg:$("#table2 td")

children() 紧挨自己的下一个元素