jQuery API .parent()

最新推荐文章于 2024-01-09 20:32:41 发布

原创最新推荐文章于 2024-01-09 20:32:41 发布 · 753 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #api #parent #节点

本文详细介绍了jQuery中.parent()方法的使用，包括其基本语法、参数、例子及应用场景，帮助开发者理解如何在DOM树中查找元素的父级元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.parent()

描述: 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器。

.parent([selector])

selector

类型: Selector

一个字符串，用于匹配元素的选择器表达式字符串。

如果提供的jQuery代表了一组DOM元素， .parent() 方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象

例子:

Example: 显示页面中每个元素的父元素(父元素 > 子元素)。可以查看 raw html 的源代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>
<style>
	div,p{ margin:10px;}
</style>
</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>

效果图：

Example: 查找每个段落的父元素，要求该父元素要带有 "selected" 样式。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.2.js"></script>
<style>
	div,p{ margin:10px;}
</style>
</head>

<body>

<div><p>第一次</p></div>
<div class="selected"><p>第二次</p></div>
<script>$("p").parent(".selected").css("background", "yellow");</script>

</body>
</html>

效果图：