專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時(shí)間：2022-05-11 09:55:44 來源：動(dòng)力節(jié)點(diǎn) 瀏覽10578次
JavaScript 庫 jQuery 提供了某些用于獲取 HTML 元素的父元素的方法。使用這些方法，您可以輕松獲取元素的直接父級(jí)或所有父級(jí)。此外，也可以使用 jQuery 方法在兩個(gè)指定元素之間或與所選元素匹配的最接近的父元素之間獲取元素。
有四種方法可用于獲取父元素，如下所示。
1.parent()方法
2.parents()方法
3.parentUntil() 方法
4.最接近()方法
讓我們?cè)敿?xì)了解上述每種方法。
為了找到元素的直接父元素，使用了 parent() 方法。它是一個(gè)內(nèi)置的 jQuery 函數(shù)，它只向上一級(jí)指定元素并獲取該元素的直接父級(jí)。
句法
$ （選擇器）。父母（過濾器）
注意：filter 參數(shù)用于通過指定選擇器表達(dá)式來壓縮父元素的搜索，它是可選的。
例子
假設(shè)您要獲取<span>元素的直接父元素，該元素存在于<li>元素中，而該元素又是<div>元素的一部分。
HTML
< div 樣式= "寬度：500 像素；" >我是span元素的曾祖父母
< ul >我是span元素的祖父母
< li >我是span元素的直接父母
< span >我是span元素< / span >
< / li >
< / ul >
< / div >
上面代碼中一共生成了四個(gè)元素，分別是;<div>、<ul>、<li>和<span>。觀察上面的層次結(jié)構(gòu)，<li>元素被認(rèn)為是<span>元素的直接父元素，<ul>是<span>元素的祖父母，<div>是曾祖父母，因?yàn)樗械脑厍短自?lt;div>元素內(nèi)。
jQuery
$ （文件）。準(zhǔn)備好（函數(shù)（）{
$ （“跨度” ）。父（）。css（{ “顏色” ： “紫色” ， “邊框” ： “2px純紫色” } ）；
} ）；
我們?cè)?lt;span>元素上應(yīng)用了 parent() 方法，并將 css() 方法鏈接到它，以突出顯示<span>元素的直接父元素并驗(yàn)證父元素是否已成功訪問。
為了更好地演示和理解，還使用 ??CSS 將一些基本樣式應(yīng)用于這些元素。
輸出
parent() 方法工作正常，成功訪問父元素。
parents() 方法的工作方式與 parent() 方法類似，唯一的區(qū)別是它不是獲取直接父級(jí)，而是獲取指定元素的所有父級(jí)。
句法
$ （選擇器）。父母（過濾器）
注意：filter 參數(shù)用于通過指定選擇器表達(dá)式來壓縮父元素的搜索，它是可選的。
例子
要理解 parents() 方法的概念，我們將參考與上面相同的示例，并使用 parents() 方法而不是 parent() 方法，看看它是如何工作的。
jQuery
$ （文件）。準(zhǔn)備好（函數(shù)（）{
$ （“跨度” ）。父母（）。css（{ “顏色” ： “紫色” ， “邊框” ： “3px純紫色” } ）；
} ）；
上面的代碼應(yīng)該以 css() 方法指定的樣式突出顯示<span>元素的所有父元素。
輸出
主體上方突出顯示的元素是 元素。parents() 方法也會(huì)獲取它，因?yàn)樗彩侵付ㄔ氐母冈亍?/p>
為了獲取兩個(gè)指定元素之間的父元素，使用了 parentUntil() 方法。
句法
$ （選擇器）。父母直到（停止，過濾）
注意： filter 參數(shù)與 parent() 和 parents() 方法的功能相同，但是 stop 參數(shù)用于表示應(yīng)該停止搜索父元素的元素。這兩個(gè)參數(shù)都是可選的。
例子
這個(gè)例子說明了 parentUntil() 方法的工作。
HTML
< body class = "main" > body (曾祖父母)
< div style = "width:500px;" > div(祖父)
< ul > ul(直接父)
< li > li
< span > span < / span >
< / li >
< / ul >
< / div >
< / body >
我們創(chuàng)建了一個(gè) div，在該 div 中我們嵌套了三個(gè)元素，即<ul>、<li>和<span>。
jQuery
$ （文件）。ready ( function ( ) {
$ ( "li" ) . parentsUntil ( "body" ) . css ( { "color" : "blue" , "border" : "2px solid blue" } ) ;
} ) ;
在上面的代碼中，我們選擇了<li>元素并使用 parentUntil() 方法查找<li>和<body>元素之間的所有父元素。
輸出
從輸出中可以看出，在<body>之前的所有<li>的父級(jí)(div 和 ul)都已突出顯示。
最近的() 方法獲取與指定元素匹配的第一個(gè)元素。
句法
$ （選擇器）。最接近的（過濾器，上下文）
注意： filter 參數(shù)與其他方法具有相同的功能，但是在此方法中是必需的。另一方面，context 參數(shù)是可選的，它指定一個(gè) DOM 元素，應(yīng)該在其中找到匹配項(xiàng)。
例子
這個(gè)例子說明了最接近()方法的工作。
< 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)建了一個(gè) div，并且在該 div 中我們嵌套了兩個(gè)<ul>元素和一個(gè)<li>、<span>元素。
jQuery
$ （文件）。準(zhǔn)備好（函數(shù)（）{
$ （“跨度” ）。最近（“ul” ）。css（{ “顏色” ： “藍(lán)色” ， “邊框” ： “2px純藍(lán)色” } ）；
} ）；
我們應(yīng)用了最接近()方法來突出顯示 元素的第一個(gè)祖先。
輸出
正如輸出中所指出的，第二個(gè)<ul>元素是<span>元素的第一個(gè)祖先。
使用上述方法，您可以獲取指定 HTML 元素的父元素。
通過應(yīng)用諸如parent()、parents()、parentUntil()和closest()等方法來獲取jQuery中的父元素。parent() 方法獲取元素的直接父元素，parents() 方法獲取元素的所有父元素，parentUntil() 查找兩個(gè)指定元素之間的父元素，closest() 方法獲取與指定元素匹配的第一個(gè)元素元素。本指南中解釋了所有這些方法及其相關(guān)示例。
以上就是關(guān)于“在jQuery中獲取父元素”的介紹，大家如果對(duì)此比較感興趣，想了解更多相關(guān)知識(shí)，不妨來關(guān)注一下動(dòng)力節(jié)點(diǎn)的jQuery教程，里面有更豐富的知識(shí)等著大家去學(xué)習(xí)，希望對(duì)大家能夠有所幫助哦。
Java實(shí)驗(yàn)班
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
Java就業(yè)班
有基礎(chǔ) 直達(dá)就業(yè)
Java夜校直播班
業(yè)余時(shí)間 高薪轉(zhuǎn)行
Java在職加薪班
工作1~3年，加薪神器
Java架構(gòu)師班
工作3~5年，晉升架構(gòu)
提交申請(qǐng)后，顧問老師會(huì)電話與您溝通安排學(xué)習(xí)
官方微信
官方抖音
京公網(wǎng)安備 11030102010736號(hào)