How to find the number of sibling elements in jquery-Front-end Q&A-php.cn

How to find the number of sibling elements in jquery

青灯夜游

Release： 2022-05-16 16:17:57

Original

2152 people have browsed it

Obtaining method: 1. Use siblings() to obtain the sibling elements of the specified element. The syntax "specified element.siblings()" will return a jQuery object containing all sibling elements; 2. Use the length attribute to count and combine Returns the number of elements in the jQuery object, the syntax is "specify object.length".

How to find the number of sibling elements in jquery

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

jquery method to find the number of sibling elements

1. Use the siblings() method to get all the brothers of the selected element Element

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

指定元素.siblings()

Copy after login

will return a jQuery object containing all sibling elements.

2. Use the length attribute to get the number

The length attribute will count the number of elements in the jQuery object and return it.

指定对象.length

Copy after login

Implementation 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-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("h2").siblings().css("border","2px solid red")
					var len=$("h2").siblings().length;
					console.log("兄弟元素的个数为："+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>获取兄弟元素的个数</button>
	</body>
</html>

Copy after login

How to find the number of sibling elements in jquery

[Recommended learning: jQuery video tutorial, web Front-end video】

The above is the detailed content of How to find the number of sibling elements in jquery. For more information, please follow other related articles on the PHP Chinese website!