jquery如何求兄弟節(jié)點(diǎn)的內(nèi)容值

發(fā)布時(shí)間：2022-08-16 09:35:24 來(lái)源：億速云閱讀：168 作者：iii 欄目：web開(kāi)發(fā)

這篇文章主要介紹“jquery如何求兄弟節(jié)點(diǎn)的內(nèi)容值”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“jquery如何求兄弟節(jié)點(diǎn)的內(nèi)容值”文章能幫助大家解決問(wèn)題。

實(shí)現(xiàn)步驟：1、用遍歷兄弟節(jié)點(diǎn)的函數(shù)（siblings()、next()等）獲取指定元素的兄弟節(jié)點(diǎn)，語(yǔ)法“指定元素.指定遍歷函數(shù)”；2、用text()或html()函數(shù)獲取被選節(jié)點(diǎn)的內(nèi)容值，語(yǔ)法“兄弟節(jié)點(diǎn).text()”或“兄弟節(jié)點(diǎn).html()”。

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

jquery求兄弟節(jié)點(diǎn)的內(nèi)容值，可以看出兩個(gè)部分：

查找兄弟節(jié)點(diǎn)
獲取被選節(jié)點(diǎn)的內(nèi)容值

步驟1、查找兄弟節(jié)點(diǎn)

jquery中提供了多種獲取兄弟節(jié)點(diǎn)的函數(shù)，一般有七個(gè)：

siblings()方法，主要用于獲得指定元素的同級(jí)所有兄弟元素
next()方法，主要用于獲得指定元素的下一個(gè)兄弟元素
nextAll()方法，主要用于獲得指定元素的下一個(gè)同級(jí)的所有兄弟元素
nextUntil()方法，主要用于獲得指定元素的下一個(gè)兄弟元素，這個(gè)兄弟元素必須為指定元素與nextUntil()方法所設(shè)置元素之間的元素
prev()方法，主要用于獲得指定元素的上一級(jí)兄弟元素
prevAll()方法，主要用于獲得指定元素上一級(jí)所有的兄弟元素
prevUntil()方法，主要用于獲得指定元素的上一個(gè)兄弟元素，這個(gè)兄弟元素必須為指定元素與prevUntil()方法所設(shè)置元素之間的元素

示例：使用next()獲取被選元素h3的下一個(gè)兄弟節(jié)點(diǎn)

$("h3").next()

步驟2、獲取被選節(jié)點(diǎn)的內(nèi)容值

使用text() 方法設(shè)置被選節(jié)點(diǎn)的文本內(nèi)容

示例1：獲取下一個(gè)兄弟節(jié)點(diǎn)的內(nèi)容值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.siblings,.siblings *{ 
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
			.color{
				color:red;
			}
		</style>
		<script src="js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("h3").next().css("color","red");
					var con=$("h3").next().text();
					console.log(con);
				});
			});
		</script>
	</head>
	<body>
		<div class="siblings">div (父)
			<p>p（兄弟元素）</p>
			<span>span（兄弟元素）</span>
			<h3 class="color">h3（本元素）</h3>
			<h4>h4（兄弟元素）</h4>
			<p>p（兄弟元素）</p>
		</div>
		<button>獲取兄弟節(jié)點(diǎn)的內(nèi)容值</button>
	</body>
</html>

jquery如何求兄弟節(jié)點(diǎn)的內(nèi)容值

示例2：獲取全部兄弟節(jié)點(diǎn)的內(nèi)容值

$(document).ready(function() {
	$("button").click(function() {
		$("h3").siblings().css("color","red");
		var con=$("h3").siblings().text();
		console.log(con);
	});
});

jquery如何求兄弟節(jié)點(diǎn)的內(nèi)容值

使用html()設(shè)置被選節(jié)點(diǎn)的內(nèi)容（innerHTML）

示例：獲取上一個(gè)兄弟節(jié)點(diǎn)的內(nèi)容值

$(document).ready(function() {
	$("button").click(function() {
		$("h3").next().css("color","red");
		var con=$("h3").next().html();
		console.log(con);
	});
});

jquery如何求兄弟節(jié)點(diǎn)的內(nèi)容值

關(guān)于“jquery如何求兄弟節(jié)點(diǎn)的內(nèi)容值”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

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

jquery如何求兄弟節(jié)點(diǎn)的內(nèi)容值

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽