How to implement sibling node removal style in jquery

Method: 1. Use functions such as siblings() and next() to obtain the sibling nodes of the specified element. The syntax is "specified element.siblings()"; 2. Use removeClass() or removeAttr() to remove the specified element. Select the style of the element with the syntax "sibling node.removeClass()".

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jquery sibling node removal style, you can see two parts:

• Find sibling nodes

• Remove the style of the selected node

1. Find sibling nodes

jquery provides a variety of ways to get brothers There are generally seven methods for nodes:

• siblings() method, which is mainly used to obtain all sibling elements of the same level of the specified element

• The next() method is mainly used to obtain the next sibling element of the specified element

• nextAll() method is mainly used to obtain all the sibling elements of the next sibling element of the specified element

• nextUntil() method is mainly used to obtain the next sibling element of the specified element. This sibling element must be the element between the specified element and the element set by the nextUntil() method

• prev() method, mainly used to obtain the upper level sibling elements of the specified element

• prevAll() method, mainly used to obtain the previous level of the specified element Level all sibling elements

• The prevUntil() method is mainly used to obtain the previous sibling element of the specified element. This sibling element must be between the specified element and the element set by the prevUntil() method. Elements between

Example: Use next() to get the next sibling node of the selected element h2

$("h2").next()

2, remove the style of the selected node

• Use removeClass() to remove the specified CSS class

Example 1: Remove the style of the next sibling node

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

Example 2: Remove the styles of all sibling nodes

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

• Use removeAttr() to remove id, class or style attributes

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

[Recommended learning: jQuery video tutorial, web front-end video】

The above is the detailed content of How to implement sibling node removal style in jquery. For more information, please follow other related articles on the PHP Chinese website!