这几个筛选器都是找直系祖先元素的,但具体用法不同
.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]
现在,你清楚它们的区别了么?