ホームページ > 記事 > ウェブフロントエンド > jqueryを使用して要素に含まれるサブ要素の数を取得する方法
jqueryを使用して要素に含まれるサブ要素の数を取得する方法
- WBOYオリジナル
- 2022-09-09 16:45:482653ブラウズ
jquery では、children() メソッドを length 属性とともに使用して、要素に含まれる子要素の数を取得できます。children() メソッドは、選択した要素のすべての子要素と長さを返すことができます。属性はjqueryオブジェクトに含まれる要素を取得することができ、その数値、構文は「$(指定された要素).children().length;」です。
この記事の動作環境: Windows 10 システム、jquery バージョン 3.6.1、Dell G3 コンピューター。
jquery で要素に含まれる子要素の数を取得する方法
children メソッドと length 属性を使用して、要素に含まれる子要素の数を取得できます。
children() メソッドは、選択された要素のすべての直接の子要素を返します。
DOM ツリー: このメソッドは、DOM ツリーの単一レベルを下位にのみ移動します。複数のレベルを下に移動するには (子孫ノードまたは他の子孫を返す)、find() メソッドを使用します。
ヒント: DOM ツリーを 1 レベル上に移動するか、ドキュメントのルート要素 (親ノードまたは他の祖先を返す) までのすべてのパスを移動するには、parent() またはparents() メソッドを使用します。 。
構文は次のとおりです:
$(selector).children(filter)
length プロパティには、jQuery オブジェクトの要素の数が含まれます。
構文
$(selector).length
例は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var res = $("ul").children().length;
$(".button2").click(function(){
$("input").val(res);
});
});
</script>
</head>
<body>body (曾祖先节点)
<div>div (祖先节点)
<ul>ul (直接父节点)
<li>li (子节点)</li>
<li>li (子节点)</li>
<li>li (子节点)</li>
<li>li (子节点)</li>
<li>li (子节点)</li>
</ul>
</div>
</body>
<p>数量: <input type="text" name="user"></p>
<button class="button2">获取ul (直接父节点)的子元素个数</button>
</html>出力結果:
推奨される関連チュートリアル: jQuery ビデオ チュートリアル
以上がjqueryを使用して要素に含まれるサブ要素の数を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。