Home > Article > Web Front-end > What are the ways to find sibling elements in jquery?
What are the ways to find sibling elements in jquery?
- 青灯夜游Original
- 2022-05-25 17:50:314678browse
There are seven methods: 1. siblings(), which can obtain all elements of the same generation; 2. next(), which can obtain the next sibling elements; 3. nextAll(), which can obtain all the elements of the next sibling. ; 4. prev(), you can get the upper level sibling elements; 5. prevAll(), you can get all the upper level sibling elements, etc.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
There are seven methods for jquery to find sibling elements: siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()
1. Siblings() method
is mainly used to obtain all elements of the specified element’s peers
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$("li.start").siblings().css({
"color": "red",
"border": "2px solid red"
});
});
</script>
</head>
<body>
<div style="width:500px;" class="siblings">
<ul>ul
<li>li (同辈节点)</li>
<li>li (上一个同辈节点)</li>
<li class="start">li (本元素)</li>
<li>li (下一个同辈节点)</li>
<li>li (同辈节点)</li>
</ul>
</div>
</body>
</html>
2. next( ) method
is mainly used to obtain the next sibling element of the specified element
$(document).ready(function() {
$("li.start").next().css({
"color": "red",
"border": "2px solid red"
});
});
3. nextAll() method
Mainly used to obtain all elements of the next sibling of the specified element
$(document).ready(function() {
$("li.start").nextAll().css({
"color": "red",
"border": "2px solid red"
});
});
##4. nextUntil() method
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.5. prev() method
Mainly used to obtain the upper-level sibling elements of the specified element$(document).ready(function() {
$("li.start").prev().css({
"color": "red",
"border": "2px solid red"
});
});
Mainly used to obtain all sibling elements at the upper level of the specified element
$(document).ready(function() {
$("li.start").prevAll().css({
"color": "red",
"border": "2px solid red"
});
});
##7. prevUntil() method
Mainly used to obtain the previous sibling element of the specified element. This sibling element must be the element between the specified element and the element set by the prevUntil() method
[Recommended learning:jQuery video tutorial
、web front-end video】
The above is the detailed content of What are the ways to find sibling elements in jquery?. For more information, please follow other related articles on the PHP Chinese website!