jqueryで最初のいくつかの子要素を取得する方法-フロントエンドQ&A-php.cn

jqueryで最初のいくつかの子要素を取得する方法

青灯夜游

リリース： 2022-07-25 16:25:56

オリジナル

2841 人が閲覧しました

jquery で最初のいくつかの子要素を取得する手順: 1. Children() 関数を使用して、すべての子要素を取得します。構文「parent element.children();」は、すべての子要素を含む jquery オブジェクトを返します。子要素; 2. :lt() セレクターを使用して、children() によって取得される子要素の範囲を絞り込みます。構文 "parent element.children(:lt(index))" は、インデックス値が次の子要素のみを取得します。指定された数値より小さい場合は、それを返します。

jqueryで最初のいくつかの子要素を取得する方法

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

jquery では、children() 関数と :lt() セレクターを使用して、最初のいくつかの子要素を取得できます。

実装手順:

ステップ 1:children() を使用してすべての子要素を取得します

children( ) 指定した親ノードの下にあるすべての直接の子要素を取得できます。

父元素.children()

ログイン後にコピー

はすべての子要素を含む jquery オブジェクトを返します

ステップ 2: :lt(index) を使用します。 セレクターは最初のいくつかの子要素を取得します

使用: lt() セレクターを使用して、children() によって取得される子要素の範囲を絞り込み、指定されたインデックス値よりも小さい要素のみを取得します番号。

父元素.children(:lt(index))

ログイン後にコピー

これは、最初のいくつかの子要素を含む jquery オブジェクトを返します

完全なサンプルコード: 親要素 ul

の最初の 2 つの子要素 li を取得します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.0.min.js"></script>
		<script>
			$(function () {
            $("button").click(function () {
				$("ul").children("li:lt(2)").css("background-color","red");
            })
        })
    </script>
	<style type="text/css">
		ul{
			background-color:yellow;
		}
		li{
			border:1px solid red;
			margin:10px;
		}
	</style>
	</head>
	<body>
		<ul>
			<li>香蕉</li>
			<li>苹果</li>
			<li>梨子</li>
			<li>橘子</li>
		</ul>
		<button>父元素ul的前2个子元素li</button>
	</body>
</html>

ログイン後にコピー

jqueryで最初のいくつかの子要素を取得する方法