jqueryでli番号を取得する方法は何ですか?-jsチュートリアル-php.cn

jqueryでli番号を取得する方法は何ですか?

青灯夜游

リリース： 2022-03-22 17:47:32

オリジナル

4911 人が閲覧しました

取得方法: 1. eq() メソッドを使用して、指定されたインデックス位置にある li 要素を選択します。構文は "$("li").eq (インデックス番号)" です。 2. " を使用します。 :eq( )" セレクターを使用すると、指定したインデックス位置にある li 要素を選択できます。構文は "$("li:eq(インデックス番号)")" です。

jqueryでli番号を取得する方法は何ですか?

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jquery は li

1 の数を取得します。eq() メソッドを使用します

eq () メソッドは、選択された要素の指定されたインデックス番号を持つ要素を返します。インデックス番号は 0 から始まるため、最初の要素のインデックス番号は 0 (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>

ログイン後にコピー

jqueryでli番号を取得する方法は何ですか?

2. ":eq()" セレクター

:eq() セレクターを使用して、指定されたインデックス値を選択します要素。インデックス値は 0 から始まり、すべての最初の要素のインデックス値は 0 (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>

ログイン後にコピー

jqueryでli番号を取得する方法は何ですか?