parent()
取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器。
.parent([selector ])
- selector类型: Selector。一个字符串,用于匹配元素的选择器表达式字符串。
提供一个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').parent().css('background-color', 'red');
此调用的结果是一个level-2列表红色背景,由于我们没有提供一个选择器表达式,所以它的父元素就是返回的 jQuery 对象的一部分。如果我们提供了选择器,那么只有满足选择器的元素才会被包含在结果中。
例子
显示页面中每个元素的父元素(父元素>子元素)。可以查看 raw html 的源代码。
<!DOCTYPE html> <html> <head> <style> div,p { margin:10px; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <div>div, <span>span, </span> <b>b </b> </div> <p>p, <span>span, <em>em </em> </span> </p> <div>div, <strong>strong, <span>span, </span> <em>em, <b>b, </b> </em> </strong> <b>b </b> </div> <script> $("*", document.body).each(function () {var parentTag = $(this ).parent().get(0).tagName; $(this ).prepend(document.createTextNode(parentTag + " > ")); }); </script> </body> </html>
div,span,b
p,span,em
div,strong,span,em,b,b
查找每个段落的父元素,要求该父元素要带有"selected"样式。
<!DOCTYPE html> <html> <head> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div> <script>$("p").parent(".selected").css("background", "yellow");</script> </body> </html>
Hello
Hello Again