当前位置：首页 > jquery

jquery 父元素

2026-04-08 00:20:40jquery

jQuery 获取父元素的方法

在 jQuery 中，可以通过多种方式获取元素的父元素。以下是几种常用的方法：

parent() 方法 parent() 方法返回被选元素的直接父元素。如果需要匹配特定选择器的父元素，可以将选择器作为参数传入。

// 获取直接父元素
$('#child').parent();

// 获取匹配特定选择器的父元素
$('#child').parent('.parent-class');

parents() 方法 parents() 方法返回被选元素的所有祖先元素，可以一直向上追溯到文档的根元素。可以通过传入选择器来筛选特定的祖先元素。

// 获取所有祖先元素
$('#child').parents();

// 获取匹配特定选择器的祖先元素
$('#child').parents('.ancestor-class');

parentsUntil() 方法 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。可以指定一个选择器或 DOM 元素作为停止点。

// 获取直到指定选择器的所有祖先元素
$('#child').parentsUntil('.stop-here');

// 获取直到指定 DOM 元素的所有祖先元素
$('#child').parentsUntil(document.getElementById('stop-here'));

closest() 方法 closest() 方法返回被选元素的第一个匹配指定选择器的祖先元素（包括元素自身）。如果找不到匹配的元素，则返回空 jQuery 对象。

// 获取第一个匹配选择器的祖先元素
$('#child').closest('.ancestor-class');

示例代码

以下是一个完整的示例，展示如何使用这些方法获取父元素：

jquery 父元素

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Parent Element Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="grandparent">
        <div class="parent">
            <div id="child">Child Element</div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 使用 parent() 获取直接父元素
            console.log($('#child').parent().attr('class')); // 输出: parent

            // 使用 parents() 获取所有祖先元素
            console.log($('#child').parents().length); // 输出: 2 (parent 和 grandparent)

            // 使用 parentsUntil() 获取直到指定选择器的祖先元素
            console.log($('#child').parentsUntil('body').length); // 输出: 2

            // 使用 closest() 获取第一个匹配选择器的祖先元素
            console.log($('#child').closest('.grandparent').attr('class')); // 输出: grandparent
        });
    </script>
</body>
</html>