What is the method to get the li number in jquery?-JS Tutorial-php.cn

What is the method to get the li number in jquery?

青灯夜游

Release： 2022-03-22 17:47:32

Original

4884 people have browsed it

Obtaining method: 1. Use the eq() method to select the li element at the specified index position. The syntax is "$("li").eq (index number)"; 2. Use ":eq( )" selector, you can select the li element at the specified index position, the syntax is "$("li:eq(index number)")".

What is the method to get the li number in jquery?

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

jquery gets the number of li

1. Use the eq() method

eq () method returns the element with the specified index number of the selected element. Index numbers start with 0, so the index number of the first element is 0 (not 1).

<!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").eq(2).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>第四个子元素</li>
				<li>第五个子元素</li>
			</ul>
		</div>
		<p>选择第3个li元素（索引号为2）</p>
	</body>
</html>

Copy after login

What is the method to get the li number in jquery?

2. Use the ":eq()" selector

:eq() selector to select the specified index value element. Index values start at 0, and all first elements have an index value of 0 (not 1).

<!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:eq(1)").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>第四个子元素</li>
				<li>第五个子元素</li>
			</ul>
		</div>
		<p>选择第2个li元素（索引号为1）</p>
	</body>
</html>

Copy after login

What is the method to get the li number in jquery?

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

The above is the detailed content of What is the method to get the li number in jquery?. For more information, please follow other related articles on the PHP Chinese website!