jquery怎麼求兄弟節點的內容值

實作步驟：1、用遍歷兄弟節點的函數（siblings()、next()等）取得指定元素的兄弟節點，語法「指定元素.指定遍歷函數」；2、用text()或html()函數取得被選節點的內容值，語法「兄弟節點.text()」或「兄弟節點.html()」。

本教學操作環境：windows7系統、jquery3.6.0版本、Dell G3電腦。

jquery求兄弟節點的內容值，可以看出兩個部分：

• 找出兄弟節點

• #取得被選取節點的內容值

步驟1、尋找兄弟節點

jquery中提供了多種取得兄弟節點的函數，一般有七個：

• siblings()方法，主要用於獲得指定元素的同級所有兄弟元素

• next ()方法，主要用於獲得指定元素的下一個兄弟元素

• nextAll()方法，主要用於獲得指定元素的下一個同級的所有兄弟元素

• nextUntil()方法，主要用於取得指定元素的下一個兄弟元素，這個兄弟元素必須為指定元素與nextUntil()方法設定元素之間的元素

• prev()方法，主要用於獲得指定元素的上一級兄弟元素

• #prevAll()方法，主要用於獲得指定元素上一級所有的兄弟元素

• prevUntil()方法，主要用來取得指定元素的上一個兄弟元素，這個兄弟元素必須為指定元素與prevUntil()方法設定元素之間的元素

範例：使用next()取得被選元素h2的下一個兄弟節點

$("h2").next()

步驟2、取得被選節點的內容值

• 使用text() 方法設定被選節點的文字內容

範例1：取得下一個兄弟節點的內容值

	
		
		
		
		
	
	
		
div (父)
			
p（兄弟元素）
			span（兄弟元素）
			
h2（本元素）
			
h3（兄弟元素）
			
p（兄弟元素）
		
		获取兄弟节点的内容值
	

範例2：取得全部兄弟節點的內容值

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

• 使用html ()設定被選節點的內容（innerHTML）

範例：取得上一個兄弟節點的內容值

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

【推薦學習：jQuery影片教學、web前端影片】

以上是jquery怎麼求兄弟節點的內容值的詳細內容。更多資訊請關注PHP中文網其他相關文章！