在jQuery中獲取父元素

更新時間：2022-05-11 09:55:44 來源：動力節(jié)點(diǎn) 瀏覽10351次

JavaScript 庫 jQuery 提供了某些用于獲取 HTML 元素的父元素的方法。使用這些方法，您可以輕松獲取元素的直接父級或所有父級。此外，也可以使用 jQuery 方法在兩個指定元素之間或與所選元素匹配的最接近的父元素之間獲取元素。

如何在 jQuery 中獲取父元素

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

1.parent()方法

2.parents()方法

3.parentUntil() 方法

4.最接近()方法

讓我們詳細(xì)了解上述每種方法。

parent() 方法

為了找到元素的直接父元素，使用了 parent() 方法。它是一個內(nèi)置的 jQuery 函數(shù)，它只向上一級指定元素并獲取該元素的直接父級。

句法

$ （選擇器）。父母（過濾器）

注意：filter 參數(shù)用于通過指定選擇器表達(dá)式來壓縮父元素的搜索，它是可選的。

例子

假設(shè)您要獲取<span>元素的直接父元素，該元素存在于<li>元素中，而該元素又是<div>元素的一部分。

HTML

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

上面代碼中一共生成了四個元素，分別是;<div>、<ul>、<li>和<span>。觀察上面的層次結(jié)構(gòu)，<li>元素被認(rèn)為是<span>元素的直接父元素，<ul>是<span>元素的祖父母，<div>是曾祖父母，因為所有的元素嵌套在<div>元素內(nèi)。

jQuery

$ （文件）。準(zhǔn)備好（函數(shù)（）{
    $ （“跨度” ）。父（）。css（{ “顏色” ： “紫色” ， “邊框” ： “2px純紫色” } ）；
} ）；

我們在<span>元素上應(yīng)用了 parent() 方法，并將 css() 方法鏈接到它，以突出顯示<span>元素的直接父元素并驗證父元素是否已成功訪問。

為了更好地演示和理解，還使用 ??CSS 將一些基本樣式應(yīng)用于這些元素。

輸出

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

parents() 方法

parents() 方法的工作方式與 parent() 方法類似，唯一的區(qū)別是它不是獲取直接父級，而是獲取指定元素的所有父級。

句法

$ （選擇器）。父母（過濾器）

注意：filter 參數(shù)用于通過指定選擇器表達(dá)式來壓縮父元素的搜索，它是可選的。

例子

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

jQuery

$ （文件）。準(zhǔn)備好（函數(shù)（）{
    $ （“跨度” ）。父母（）。css（{ “顏色” ： “紫色” ， “邊框” ： “3px純紫色” } ）；
} ）；

上面的代碼應(yīng)該以 css() 方法指定的樣式突出顯示<span>元素的所有父元素。

輸出

主體上方突出顯示的元素是元素。parents() 方法也會獲取它，因為它也是指定元素的父元素。

parentsUntil() 方法

為了獲取兩個指定元素之間的父元素，使用了 parentUntil() 方法。

句法

$ （選擇器）。父母直到（停止，過濾）

注意： filter 參數(shù)與 parent() 和 parents() 方法的功能相同，但是 stop 參數(shù)用于表示應(yīng)該停止搜索父元素的元素。這兩個參數(shù)都是可選的。

例子

這個例子說明了 parentUntil() 方法的工作。

HTML

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

我們創(chuàng)建了一個 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 參數(shù)與其他方法具有相同的功能，但是在此方法中是必需的。另一方面，context 參數(shù)是可選的，它指定一個 DOM 元素，應(yīng)該在其中找到匹配項。

例子

這個例子說明了最接近()方法的工作。

< 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 >
< /正文>

我們創(chuàng)建了一個 div，并且在該 div 中我們嵌套了兩個<ul>元素和一個<li>、<span>元素。

jQuery

$ （文件）。準(zhǔn)備好（函數(shù)（）{
    $ （“跨度” ）。最近（“ul” ）。css（{ “顏色” ： “藍(lán)色” ， “邊框” ： “2px純藍(lán)色” } ）；
} ）；

我們應(yīng)用了最接近()方法來突出顯示元素的第一個祖先。

輸出

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

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

結(jié)論

通過應(yīng)用諸如parent()、parents()、parentUntil()和closest()等方法來獲取jQuery中的父元素。parent() 方法獲取元素的直接父元素，parents() 方法獲取元素的所有父元素，parentUntil() 查找兩個指定元素之間的父元素，closest() 方法獲取與指定元素匹配的第一個元素元素。本指南中解釋了所有這些方法及其相關(guān)示例。

以上就是關(guān)于“在jQuery中獲取父元素”的介紹，大家如果對此比較感興趣，想了解更多相關(guān)知識，不妨來關(guān)注一下動力節(jié)點(diǎn)的jQuery教程，里面有更豐富的知識等著大家去學(xué)習(xí)，希望對大家能夠有所幫助哦。

jQuery教程

上一篇Ajax調(diào)用后臺方法下一篇Java教程：SpringMVC配置文件詳解

相關(guān)閱讀

大战熟女丰满人妻av-荡女精品导航-岛国aaaa级午夜福利片-岛国av动作片在线观看-岛国av无码免费无禁网站-岛国大片激情做爰视频

在jQuery中獲取父元素

如何在 jQuery 中獲取父元素

parent() 方法

parents() 方法

parentsUntil() 方法

最接近()方法

結(jié)論

JVM

多線程下載器項目實戰(zhàn)

Java日志框架全集（選學(xué)）

高并發(fā)解決方案（選學(xué)）

零基礎(chǔ)能學(xué)Java嗎？

零基礎(chǔ)能學(xué)Java嗎？

零基礎(chǔ)能學(xué)Java嗎？

關(guān)于我們

課程中心

在線課程

資料廣場

全國免費(fèi)電話