jquery怎麼實現兄弟節點移除樣式

方法：1、用siblings()、next()等函數取得指定元素的兄弟節點，語法「指定元素.siblings()」；2、用removeClass()或removeAttr()移除被選取元素的樣式，語法「兄弟節點.removeClass()」。

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

jquery兄弟節點移除樣式，可以看出兩個部分：

• #找出兄弟節點

• #移除被選節點的樣式

1、找出兄弟節點

jquery中提供了多種獲取兄弟節點的方法，一般有七個：

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

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

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

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

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

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

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

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

$("h2").next()

2、移除被選節點的樣式

• 使用removeClass()移除指定CSS類別

範例1：移除下一個兄弟節點的樣式

	
		
		
		
		
	
	
		
div (父)
			
p（兄弟元素）
			span（兄弟元素）
			
h2（本元素）
			
h3（兄弟元素）
			
p（兄弟元素）
		
		移除兄弟节点的样式
	

範例2：移除全部兄弟節點的樣式

$(document).ready(function() {
	$("button").click(function() {
		$("h2").siblings().removeClass();
	});
});

• ##使用removeAttr()移除id、class或style屬性

$(document).ready(function() {
	$("button").click(function() {
		$("h2").siblings().removeAttr("class");
	});
});



【推薦學習：

jQuery影片教學、web前端影片】

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