jQuery父元素的获取方法
jQuery提供了一些方法来获取父元素,比如:parent()、parents()、parentsUntil()、closest()等。
parent()
parent()方法可以返回一个匹配的父元素,即直接父元素。它接收一个可选的参数,表示返回的父元素的过滤条件,可以是一个选择器表达式,也可以是一个函数。
// 获取li元素的直接父元素 $("li").parent(); // 获取li元素的直接父元素,并且过滤出class为foo的元素 $("li").parent(".foo"); // 获取li元素的直接父元素,并且过滤出符合函数条件的元素 $("li").parent(function(){ return $(this).is(".foo"); });
parents()
parents()方法可以返回一个匹配的所有父元素,即所有的祖先元素,包括直接父元素。它接收一个可选的参数,表示返回的父元素的过滤条件,可以是一个选择器表达式,也可以是一个函数。
// 获取li元素的所有父元素 $("li").parents(); // 获取li元素的所有父元素,并且过滤出class为foo的元素 $("li").parents(".foo"); // 获取li元素的所有父元素,并且过滤出符合函数条件的元素 $("li").parents(function(){ return $(this).is(".foo"); });
parentsUntil()
parentsUntil()方法可以返回一个匹配的父元素,但是不包括指定的父元素,即不包括指定的祖先元素。它接收两个参数,第一个参数表示返回的父元素的过滤条件,可以是一个选择器表达式,也可以是一个函数;第二个参数表示不包括的祖先元素,可以是一个选择器表达式,也可以是一个DOM元素。
// 获取li元素的所有父元素,但是不包括id为container的元素 $("li").parentsUntil("#container"); // 获取li元素的所有父元素,并且过滤出class为foo的元素,但是不包括id为container的元素 $("li").parentsUntil("#container", ".foo"); // 获取li元素的所有父元素,并且过滤出符合函数条件的元素,但是不包括id为container的元素 $("li").parentsUntil("#container", function(){ return $(this).is(".foo"); });
closest()
closest()方法可以返回一个匹配的最近的父元素,即最近的祖先元素。它接收一个可选的参数,表示返回的父元素的过滤条件,可以是一个选择器表达式,也可以是一个函数。
// 获取li元素的最近的父元素 $("li").closest(); // 获取li元素的最近的父元素,并且过滤出class为foo的元素 $("li").closest(".foo"); // 获取li元素的最近的父元素,并且过滤出符合函数条件的元素 $("li").closest(function(){ return $(this).is(".foo"); });
应用场景
- 用parent()方法可以实现查找某个元素的直接父元素,比如某个按钮的容器元素;
- 用parents()方法可以实现查找某个元素的所有父元素,比如某个按钮的容器元素的容器元素;
- 用parentsUntil()方法可以实现查找某个元素的所有父元素,但不包括指定的祖先元素,比如某个按钮的