jQuery：リスト要素の数を数える？

134

サーバー側のコードから生成されたリストを取得しました。jQueryを使用してリストに追加のものを追加する前に、すでにそこにあるアイテムの数を把握する必要があります。

<ul id="mylist">
    <li>Element 1</li>
    <li>Element 2</li>
</ul>

jquery html

— トム
ソース

225

試してください：

$("#mylist li").length

気になるだけ：なぜサイズを知る必要があるのですか？あなたはただ使うことはできません：

$("#mylist").append("<li>New list item</li>");

？

— クレタス
ソース

3

追加を使用して新しい項目を追加していますが、リストに含めることができる項目の数に制限があります。この状態では、ユーザーは最大4項目まで追加できますが、2項目が追加された可能性があります以前の状態から。:)

— トム・

35

jQyeryのドキュメントでは、関数呼び出しのオーバーヘッドを回避するために.lengthover .size()を使用することをお勧めしています。api.jquery.com/size

— Joe

4

size（）はjquery 1.8で廃止され、length（）を使用するようになりました。

— gloomy.penguin 2013

8

@ gloomy.penguin .lengthこれは関数ではないことに注意してください。

— ヘキサシアニド

その場で要素の幅を再計算するには、<li>カウントが必要です。

— Hristo 2015

51

var listItems = $("#myList").children();

var count = listItems.length;

もちろんこれで凝縮できます

var count = $("#myList").children().length;

jQueryの詳細については、http：//docs.jquery.com/Main_Pageから始めるとよいでしょう。

— ニック・アレン
ソース

5

安全のために、$（ "＃myList"）。children（ "li"）。length;を実行します。何らかの理由でリスト内に他の項目を追加した場合でも、この小さなコード行を忘れないでください。

— SgtPooki

10

.size（）メソッドまたは.lengthプロパティを呼び出しても同じ結果が得られますが、関数呼び出しのオーバーヘッドがないため、.lengthプロパティの方が適しています。だから最善の方法：

$("#mylist li").length

— アレックス・グエン
ソース

4

私はこれでうまくいくと思います：

var ct = $('#mylist').children().size();

— アンドリューバレット
ソース

4

そしてもちろん次のようになります：

var count = $("#myList").children().length;

（変数を設定する必要のない 'var'を削除することにより）に圧縮できます。

count = $("#myList").children().length;

ただし、これはよりクリーンです。

count = $("#mylist li").size();

— ロースター
ソース

2

このメソッドは、トップulの子ul要素内のliタグもカウントしませんか？

— 2011年

2

「変数を設定するのに「var」は必要ない」と言うのは簡単すぎる。'var'を使用しないと、すべての変数がグローバルになります。stackoverflow.com/questions/1470488/…を

— Rafael Almeida、

3

試す

$("#mylist").children().length

— Nui_CpE
ソース

1

リスト要素の数を数える

alert($("#mylist > li").length);

— ガンジ
ソース

1

リスト要素の数を数える別のアプローチ：

var num = $("#mylist").find("li").length;
console.log(num);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mylist">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
  <li>Element 5</li>
</ul>

スニペットを展開

— ペニー・リュー
ソース

0

$("button").click(function(){
    alert($("li").length);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Count the number of specific elements</title>
</head>
<body>
<ul>
  <li>List - 1</li>
  <li>List - 2</li>
  <li>List - 3</li>
</ul>
  <button>Display the number of li elements</button>
</body>
</html>

スニペットを展開

— バシルプール
ソース