Home > Article > Web Front-end > 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!