溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jquery可不可以獲取上一級元素

發(fā)布時間：2022-09-14 09:12:52 來源：億速云 閱讀：186 作者：iii 欄目：web開發(fā)

這篇文章主要介紹了jquery可不可以獲取上一級元素的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇jquery可不可以獲取上一級元素文章都會有所收獲，下面我們一起來看看吧。

jquery可以獲取上一級元素。獲取步驟：1、利用jQuery選擇器選取指定元素，語法“$("選擇器")”，會返回一個包含指定元素的jQuery對象；2、使用parent()函數(shù)獲取指定元素的直接父級元素（上一級元素）即可，語法“指定對象.parent(filter)”，參數(shù)“filter”用于縮小搜索范圍。

本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6.1版本、Dell G3電腦。

獲取上一級元素，就是獲取父級元素。在jquery中，可以使用parent()函數(shù)來獲取父級元素。

實現(xiàn)步驟

步驟1：利用jQuery 選擇器選取指定元素

1）jQuery 元素選擇器基于元素名選取元素。

$("標(biāo)簽名")

2）jQuery id選擇器基于id屬性選取元素。

$("#id屬性值")
<form id="屬性值">
//表單元素
</form>

會返回一個包含指定元素的jQuery對象。

步驟2：使用parent()函數(shù)獲取指定元素的父級元素

parent()返回被選元素的直接父元素。該方法只沿著 DOM 樹向上遍歷單一層級。

指定對象.parent(filter)
參數(shù)描述
filter可選。規(guī)定縮小搜索父元素范圍的選擇器表達(dá)式。

示例1：返回 <span> 元素的上一級元素

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				 $("span").parent("li").css({"color":"red","border":"2px solid red"});
			});
		</script>
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>

	<body class="ancestors">body (曾曾祖父節(jié)點)
		<div style="width:500px;">div (曾祖父節(jié)點)
			<ul>ul (祖父節(jié)點)
				<li>li (直接父節(jié)點，上一級元素)
					<span>span</span>
				</li>
				<li>li (直接父節(jié)點，上一級元素)
					<span>span</span>
				</li>
			</ul>
		</div>
	</body>

</html>

jquery可不可以獲取上一級元素

示例2：使用 filter 參數(shù)縮小搜索范圍

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("span").parent("li.1").css({"color":"red","border":"2px solid red"});
			});
		</script>
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>

	<body class="ancestors">body (曾曾祖父節(jié)點)
		<div style="width:500px;">div (曾祖父節(jié)點)
			<ul>ul (祖父節(jié)點)  
				<li class="1">li (直接父節(jié)點)
					<span>span</span>
				</li>
				<li class="2">li (直接父節(jié)點)
					<span>span</span>
				</li>
			</ul>   
		</div>
	</body>
	
	</html>

jquery可不可以獲取上一級元素

關(guān)于“jquery可不可以獲取上一級元素”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“jquery可不可以獲取上一級元素”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手