parents()
获得集合中每个匹配元素的祖先元素,可以提供一个可选的选择器作为参数。
.parents([selector ])
- selector类型: Selector。一个选择器字符串,用于匹配元素的选择器表达式字符串。
如果提供的jQuery代表了一组DOM元素,.parents()
方法允许我们能够在DOM树中搜索到这些元素的祖先元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的 jQuery 对象;返回的元素秩序是从离他们最近的父级元素开始的(注:从里到外的顺序)。当多个DOM元素在原有集合中,返回的集合将是原来元素以相反的顺序排序,并且重复删除。
如果提供的jQuery代表了一组DOM元素,.parent()
方法允许我们能够在DOM树中搜索到这些元素的父级元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的 jQuery 对象。
.parents()
和.parent()
方法是相似的,但后者只是进行了一个单级的DOM树查找(注:也就是只查找一层,直接的父元素,而不是更加上级的祖先元素)。此外,$("html").parent()
方法返回一个包含document
的集合,而$("html").parents()
返回一个空集合。
该方法还可以接受一个可选的选择器表达式,该选择器表达式可以是任何可传给$()
函数的选择器表达式。如果提供了选择器表达式,那么会先测试该元素是否满足匹配的选择器表达式。
考虑一个基本的嵌套列表页:
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul>
如果我们在项目A开始,我们可以找到它的祖先元素:
$('li.item-a').parents().css('background-color', 'red');
这段代码调用后的结果是:ul.level-2,li.item-ii和ul.level-1元素是红色背景(并在DOM树中向上遍历,直到<html>
元素)。由于我们没有提供一个选择器表达式,所以所有的祖先元素都是返回的 jQuery 对象的一部分。如果我们提供了选择器,那么只有匹配该选择器的元素才会被包含在结果( jQuery 对象)中。
例子
查找每个 b 标签的所有父元素。
<!DOCTYPE html> <html> <head> <style> b, span, p, html body { padding: .5em; border: 1px solid; } b { color:blue; } strong { color:red; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <div> <p> <span> <b>My parents are: </b> </span> </p> </div> <script>var parentEls = $("b").parents() .map(function () {return this .tagName; }) .get().join(", "); $("b").append("<strong>" + parentEls + "</strong>"); </script> </body> </html>
My parents are:
点击元素,查找每个 span 标签的所有独一无二的 div 父元素。
<!DOCTYPE html> <html> <head> <style> p, div, span {margin:2px; padding:1px; } div { border:2px white solid; } span { cursor:pointer; } .selected { color:blue; } b { color:red; display:block; font-size:1.1em; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <p> <div> <div><span>Hello</span></div> <span>Hello Again</span> </div> <div> <span>And Hello Again</span> </div> </p> <b>Click Hellos to toggle their parents.</b> <script>function showParents() { $("div").css("border-color", "white");var len = $("span.selected") .parents("div") .css("border", "2px red solid") .length; $("b").text("Unique div parents: " + len); } $("span").click(function () { $(this ).toggleClass("selected"); showParents(); });</script> </body> </html>