Home > Article > Web Front-end > Can jquery detect whether there are sibling elements?
can be detected. Detection method: 1. Use the "specified element.siblings()" statement to obtain all sibling elements of the specified element, which will return a jquery object containing sibling elements; 2. Use the "jquery object.length==0" statement to determine the number of sibling elements. Whether the number is 0, if it is 0, there are no sibling elements, otherwise there are.
The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.
Use jquery to check whether the specified element has sibling elements.
Checking method:
1. Use siblings() to get all sibling elements of the specified element
指定元素.siblings()
Will return a jquery object containing sibling elements.
2. Use the length attribute to get the length of the jquery object
The length obtained by the length attribute is the number of sibling elements
jquery对象.length==0
If the number of sibling elements is 0, there are no sibling elements
If the number is not equal to 0, there are sibling elements
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings,.siblings *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
var len=$("h2").siblings().length;
if(len==0){
console.log("h2没有同胞元素");
}else{
console.log("h2有同胞元素，其个数为："+len);
}
});
});
</script>
</head>
<body>
<div class="siblings">div (父)
<p>p（兄弟元素）</p>
<span>span（兄弟元素）</span>
<h2>h2（本元素）</h2>
<h3>h3（兄弟元素）</h3>
<p>p（兄弟元素）</p>
</div>
<button>检测h2是否有同胞元素</button>
</body>
</html>
[Recommended learning: jQuery video tutorial, web front-end video]
The above is the detailed content of Can jquery detect whether there are sibling elements?. For more information, please follow other related articles on the PHP Chinese website!