Home  >  Article  >  Web Front-end  >  How to implement sibling node removal style in jquery

How to implement sibling node removal style in jquery

青灯夜游
青灯夜游Original
2022-05-16 14:27:242272browse

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()".

How to implement sibling node removal style in jquery

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(兄弟元素)

How to implement sibling node removal style in jquery

Example 2: Remove the styles of all sibling nodes

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

How to implement sibling node removal style in jquery

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

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

How to implement sibling node removal style in jquery

[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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn