jQuery: Liste öğelerinin sayısını say?

134

Bazı sunucu tarafı kodundan oluşturulan bir liste var, jQuery ile ekstra şeyler eklemeden önce içinde kaç öğe olduğunu anlamaya ihtiyacım var.

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

jquery html

— Tom
kaynak

225

Deneyin:

$("#mylist li").length

Sadece merak ediyorum: neden boyutu bilmeniz gerekiyor? Sadece kullanamaz mısın:

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

?

— cletus
kaynak

3

Yeni olanları eklemek için ekleme yapıyorum, ancak listede olabilecek öğe sayısında bir sınırım var, bu durumda kullanıcı hala en fazla 4 öğe ekleyebilir, ancak 2 tane gelmiş olabilir önceki durumdan. :)

— Tom

35

JQyery belgelerinin , bir işlev çağrısının ek yükünü önlemek için .lengthover kullanılmasını önerdiğini unutmayın .size(). api.jquery.com/size

— Joe

4

size () jquery 1.8'de kullanımdan kaldırıldı ve şimdi length () kullandığını söylüyor .

— gloomy.penguin

8

@ gloomy.penguin Bunun .lengthbir işlev olmadığını unutmayın .

— hekzasiyanid

Anında öğe genişliğini yeniden hesaplamak için <li> sayısı gerekir.

— Hristo

51

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

var count = listItems.length;

Elbette bunu yoğunlaştırabilirsiniz

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

JQuery ile ilgili daha fazla yardım için http://docs.jquery.com/Main_Page başlamak için iyi bir yerdir.

— Nick Allen
kaynak

5

sadece güvenli olmak için $ ("# myList"). children ("li"). length; Herhangi bir nedenle listeye başka öğeler eklerseniz, bu küçük kod satırını unutmazsınız.

— SgtPooki

10

.Size () yöntemi veya .length özelliği çağrılırken aynı sonuca sahipsiniz, ancak bir işlev çağrısının ek yükü olmadığından .length özelliği tercih edilir. En iyi yol:

$("#mylist li").length

— Alex Nguyen
kaynak

4

Bunun yapması gerektiğini düşünüyorum:

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

— Andrew Barrett
kaynak

4

ve elbette aşağıdakiler:

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

şu şekilde yoğunlaştırılabilir: (bir değişken ayarlamak için gerekli olmayan 'var' kaldırılarak)

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

ancak bu daha temizdir:

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

— ROARSTAR
kaynak

2

Bu yöntem aynı zamanda üst ul öğesinin alt ul öğeleri içindeki li etiketleri saymaz mı?

— 10'da atripes

2

"Değişken ayarlamak için" var "demek gerekli değildir. 'Var' kullanmazsanız, tüm değişkenleriniz global olur. Bkz. Stackoverflow.com/questions/1470488/…

— Rafael Almeida

3

Deneyin

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

— Nui_CpE
kaynak

1

Liste öğelerinin sayısını say

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

— M.Ganji
kaynak

1

Liste öğelerinin sayısını saymak için başka bir yaklaşım:

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>

Snippet'i genişlet

— Penny Liu
kaynak

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>

Snippet'i genişlet

— Bashirpour
kaynak