Shulou(Shulou.com)05/31 Report--

This article mainly introduces "jquery how to achieve sibling node removal style". In daily operation, I believe many people have doubts about how to achieve sibling node removal style in jquery. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to achieve sibling node removal style in jquery"! Next, please follow the editor to study!

Method: 1, use siblings (), next () and other functions to get the sibling node of the specified element, syntax "specify element .siblings ()"; 2, use removeClass () or removeAttr () to remove the style of the selected element, syntax "siblings ()".

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

When the jquery sibling node removes the style, you can see two parts:

Find sibling node

Remove the style of the selected node

1. Find sibling nodes

Jquery provides a variety of ways to get sibling nodes, generally there are seven:

The siblings () method, which is mainly used to get all sibling elements of the specified element

The next () method, which is mainly used to get the next sibling element of the specified element

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

The nextUntil () method is mainly used to get the next sibling element of the specified element, which must be the element between the specified element and the element set by the nextUntil () method

The prev () method, which is mainly used to get the sibling element at the next level of the specified element

The prevAll () method, which is mainly used to get all sibling elements one level above the specified element

The prevUntil () method is mainly used to get the previous sibling element of the specified element, which must be the element between the specified element and the element set by the prevUntil () method

Example: use next () to get the next sibling node of the selected element h3

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

.siblings, .siblings * {display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px } .color {color:red } $(document) .ready (function () {$("button") .click (function () {$("h3") .next () .removeClass () });}); div (parent) p (brother element)

Span (sibling element) h3 (this element) h4 (sibling element) p (sibling element)

Remove the style of the sibling node

Example 2: remove the style of all sibling nodes

$(document) .ready (function () {$("button") .click (function () {$("h3"). Siblings (). RemoveClass ();})

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

$(document) .ready (function () {$("button") .click (function () {$("h3"). Siblings (). RemoveAttr ("class");})

At this point, the study on "how to implement the sibling node removal style in jquery" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.