这几个筛选器都是找直系祖先元素的,但具体用法不同
.parent(expr) - 只把父级和expr表达式匹配,匹配成功就返回父级。匹配失败,返回空数组
.parents(expr) - 加了s,就成了匹配祖先了,从父级开始查找,只要是和expr表达式匹配的直系祖先元素都返回。没匹配成,返回空数组
.closest(expr) - 这个是查最近的匹配元素(从自己开始查找),匹配成功,立即返回。匹配失败,返回空数组
.parentsUntil(expr) - 这个是从父级开始查找,到expr停止。返回父级(包括)到expr(不包括)之间的直系祖先元素。如果expr没有匹配到元素,会返回父级(包括)到html(包括)之间的所有直系祖先元素上面的看着很晕是么,那么来测试用例
<div class="d1">
d1
<div class="d2 div">
d2
<div class="d3">
d3</div>
<div class="d3">
d3
<div class="d4">
d4
<div id="div" class="div">
div
</div>
</div>
</div>
</div>
</div>
$("#div").parent(".d4") //[d4]
$("#div").parent(".d44444") //[]
$("#div").parents(".d3") //[d3] 注意,只返回了一个d3,另外一个d3不是直系祖先关系
$("#div").parents("div") //[d4,d3,d2,d1]
$("#div").parents("div22") //[]
$("#div").closest(".div") //[自己]
$("#div").closest(".d2") //[d2]
$("#div").parentsUntil(".d2") //[d4,d3] 注意,只返回了一个d3,另外一个d3不是直系祖先关系
$("#div").parentsUntil(".dddd") //[d4,d3,d2,d1,body,html]
现在,你清楚它们的区别了么?