在jQuery中获取父元素

更新时间：2022-05-11 09:55:44 来源：动力节点浏览8998次

JavaScript 库 jQuery 提供了某些用于获取 HTML 元素的父元素的方法。使用这些方法，您可以轻松获取元素的直接父级或所有父级。此外，也可以使用 jQuery 方法在两个指定元素之间或与所选元素匹配的最接近的父元素之间获取元素。

如何在 jQuery 中获取父元素

有四种方法可用于获取父元素，如下所示。

1.parent()方法

2.parents()方法

3.parentUntil() 方法

4.最接近()方法

让我们详细了解上述每种方法。

parent() 方法

为了找到元素的直接父元素，使用了 parent() 方法。它是一个内置的 jQuery 函数，它只向上一级指定元素并获取该元素的直接父级。

句法

$ （选择器）。父母（过滤器）

注意：filter 参数用于通过指定选择器表达式来压缩父元素的搜索，它是可选的。

例子

假设您要获取<span>元素的直接父元素，该元素存在于<li>元素中，而该元素又是<div>元素的一部分。

HTML

< div 样式= "宽度：500 像素；" >我是span元素的曾祖父母
    < ul >我是span元素的祖父母
        < li >我是span元素的直接父母
            < span >我是span元素< / span >
        < / li >
    < / ul >
< / div >

上面代码中一共生成了四个元素，分别是;<div>、<ul>、<li>和<span>。观察上面的层次结构，<li>元素被认为是<span>元素的直接父元素，<ul>是<span>元素的祖父母，<div>是曾祖父母，因为所有的元素嵌套在<div>元素内。

jQuery

$ （文件）。准备好（函数（）{
    $ （“跨度” ）。父（）。css（{ “颜色” ： “紫色” ， “边框” ： “2px纯紫色” } ）；
} ）；

我们在<span>元素上应用了 parent() 方法，并将 css() 方法链接到它，以突出显示<span>元素的直接父元素并验证父元素是否已成功访问。

为了更好地演示和理解，还使用 CSS 将一些基本样式应用于这些元素。

输出

parent() 方法工作正常，成功访问父元素。

parents() 方法

parents() 方法的工作方式与 parent() 方法类似，唯一的区别是它不是获取直接父级，而是获取指定元素的所有父级。

句法

$ （选择器）。父母（过滤器）

注意：filter 参数用于通过指定选择器表达式来压缩父元素的搜索，它是可选的。

例子

要理解 parents() 方法的概念，我们将参考与上面相同的示例，并使用 parents() 方法而不是 parent() 方法，看看它是如何工作的。

jQuery

$ （文件）。准备好（函数（）{
    $ （“跨度” ）。父母（）。css（{ “颜色” ： “紫色” ， “边框” ： “3px纯紫色” } ）；
} ）；

上面的代码应该以 css() 方法指定的样式突出显示<span>元素的所有父元素。

输出

主体上方突出显示的元素是元素。parents() 方法也会获取它，因为它也是指定元素的父元素。

parentsUntil() 方法

为了获取两个指定元素之间的父元素，使用了 parentUntil() 方法。

句法

$ （选择器）。父母直到（停止，过滤）

注意： filter 参数与 parent() 和 parents() 方法的功能相同，但是 stop 参数用于表示应该停止搜索父元素的元素。这两个参数都是可选的。

例子

这个例子说明了 parentUntil() 方法的工作。

HTML

< body class = "main" > body (曾祖父母)
    < div style = "width:500px;" > div(祖父)
        < ul > ul(直接父)
            < li > li
            < span > span < / span >
            < / li >
        < / ul >
    < / div >
< / body >

我们创建了一个 div，在该 div 中我们嵌套了三个元素，即<ul>、<li>和<span>。

jQuery

$ （文件）。ready ( function ( ) {
    $ ( "li" ) . parentsUntil ( "body" ) . css ( { "color" : "blue" , "border" : "2px solid blue" } ) ;
} ) ;

在上面的代码中，我们选择了<li>元素并使用 parentUntil() 方法查找<li>和<body>元素之间的所有父元素。

输出

从输出中可以看出，在<body>之前的所有<li>的父级(div 和 ul)都已突出显示。

最接近()方法

最近的() 方法获取与指定元素匹配的第一个元素。

句法

$ （选择器）。最接近的（过滤器，上下文）

注意： filter 参数与其他方法具有相同的功能，但是在此方法中是必需的。另一方面，context 参数是可选的，它指定一个 DOM 元素，应该在其中找到匹配项。

例子

这个例子说明了最接近()方法的工作。

< body class = "main" > body (great-great-grandparent)
    < div style = "width:500px;" > div (伟大/祖父母)
        < ul > ul (第二祖先/第二祖父母)
            < ul > ul (第一祖先/第一祖父母)
                < li > li (直接父母)
                    < span > span < / span >
                < / li >
            < / ul >
        < / ul >
    div >
< /正文>

我们创建了一个 div，并且在该 div 中我们嵌套了两个<ul>元素和一个<li>、<span>元素。

jQuery

$ （文件）。准备好（函数（）{
    $ （“跨度” ）。最近（“ul” ）。css（{ “颜色” ： “蓝色” ， “边框” ： “2px纯蓝色” } ）；
} ）；

我们应用了最接近()方法来突出显示元素的第一个祖先。

输出

正如输出中所指出的，第二个<ul>元素是<span>元素的第一个祖先。

使用上述方法，您可以获取指定 HTML 元素的父元素。

结论

通过应用诸如parent()、parents()、parentUntil()和closest()等方法来获取jQuery中的父元素。parent() 方法获取元素的直接父元素，parents() 方法获取元素的所有父元素，parentUntil() 查找两个指定元素之间的父元素，closest() 方法获取与指定元素匹配的第一个元素元素。本指南中解释了所有这些方法及其相关示例。

以上就是关于“在jQuery中获取父元素”的介绍，大家如果对此比较感兴趣，想了解更多相关知识，不妨来关注一下动力节点的jQuery教程，里面有更丰富的知识等着大家去学习，希望对大家能够有所帮助哦。

jQuery教程

上一篇Ajax调用后台方法下一篇Java教程：SpringMVC配置文件详解

在jQuery中获取父元素

如何在 jQuery 中获取父元素

parent() 方法

parents() 方法

parentsUntil() 方法

最接近()方法

结论

JVM

多线程下载器项目实战

Java日志框架全集（选学）

高并发解决方案（选学）

零基础能学Java吗？

零基础能学Java吗？

零基础能学Java吗？