jQuery查找——parent/parents/parentsUntil/closest

$("a").parent().parent().parent().css("border", "3px solid red");

7.点击改变颜色：设置

function changeColor(a){$(a).parent().parent().parent().css("border", "3px solid red");
}

8.将parent()返回数组的第一个元素的边框设置为红色：

选择li的父标签ul:这里返回3个元素

$("li").parent("ul").css("border", "3px solid blue");

代码如下：颜色不变，效果跟上面一样。使用的是rets[0].css()。

$("li").parent("ul").css("border", "3px solid blue");
var rets = $("li").parent("ul");
rets[0].css("border", "3px solid red");

颜色改变：这里包装了第一个元素，与上面的对比说明：parent()返回的数组的元素不是jQuery对象。

$("li").parent("ul").css("border", "3px solid blue");
var rets = $("li").parent("ul");
$(rets[0]).css("border", "3px solid red");

二、parents()

1.无表达式：沿DOM树向上遍历，直到文档的根元素()为止，可以看到逐级向上选择所有的父级元素。

$("li.item-1").parents().css("border", "3px solid blue");

2.表达式：选择class="yes"的父级。注意这里实际上是，将每个祖先元素先添加到一个临时的集合，然后根据表达式对这个集合进行筛选。parents()相当于是可以跳级选择。

$("li.item-1").parents(".yes").css("border", "3px solid blue");

3.点击改变颜色：设置

function changeColor(a){$(a).parents(".item-b").css("border", "3px solid red");
}

4.将数组中的第一个元素边框设置为红色：

选择的元素：返回的数组中有三个元素。

$("li.item-1").parents("ul").css("border", "3px solid blue");

将数组中的第一个元素边框设置为红色：使用的是rets[0].css()，效果跟上图一样，没有任何改变。

数组形式可以调用css()；

$("li.item-1").parents("ul").css("border", "3px solid blue");
var rets = $("li.item-1").parents("ul");
rets[0].css("border", "3px solid red");

将数组中的第一个元素边框设置为红色：包装后在操作：$(rets[0]).css()，颜色改变。

同上面的对比说明：parents()返回的数组中的不是jQuery对象。

$("li.item-1").parents("ul").css("border", "3px solid blue");
var rets = $("li.item-1").parents("ul");
$(rets[0]).css("border", "3px solid red");

三、parentsUntil()

1.无表达式：因为没有表达式，效果跟无表达式的parents()一样，沿DOM树向上遍历，直到文档的根元素()为止

$("li.item-1").parentsUntil().css("border", "3px solid blue");

2.表达式：

层级关系：