How to delete attributes of sibling elements in jquery-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to delete attributes of sibling elements in jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 01, 2022 pm 06:46 PM

jquery

Method: 1. Use the siblings() method to return all sibling elements of the specified element. The syntax is "element object.siblings()"; 2. Use the removeAttr() method to remove the attributes of the sibling elements. The syntax is It is "sibling element object.removeAttr(attribute)".

How to delete attributes of sibling elements in jquery

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

How to delete attributes of sibling elements in jquery

1. Get sibling elements

siblings() method returns all sibling elements of the selected element .

Sibling elements are elements that share the same parent element.

DOM tree: This method traverses forward and backward along the sibling elements of the DOM element.

Tip: Please use the prev() or next() method to narrow the scope of searching only the previous sibling element or the next sibling element.

Syntax

$(selector).siblings(filter)

2. Delete sibling element attributes

removeAttr() method removes one or more attributes from the selected element .

Syntax

$(selector).removeAttr(attribute)

Parameter Description

attribute Required. Specifies one or more properties to remove. To remove several properties, separate the property names with spaces.

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
.siblings *{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("li.start").siblings().removeAttr("style");
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul (父节点)  
<li style="color:red">li (类名为"star"的上一个兄弟节点)</li>
<li style="color:red">li (类名为"star"的上一个兄弟节点)</li>
<li class="start">li (兄弟节点)</li>
<li style="color:red">li (类名为"star"的下一个兄弟节点)</li>
<li style="color:red">li (类名为"star"的下一个兄弟节点)</li>
</ul>   
</div>
<p>在这个例子中,我们选择类名称为“star”的li元素的所有兄弟元素。</p>
</body>
</html>

Output result without adding jquery statement:

How to delete attributes of sibling elements in jquery

Output result after adding jquery statement:

How to delete attributes of sibling elements in jquery

Recommended related video tutorials: jQuery video tutorial

The above is the detailed content of How to delete attributes of sibling elements 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