jQuery: contare il numero di elementi dell'elenco?

134

Ho un elenco che viene generato da un codice lato server, prima di aggiungere elementi extra con jQuery devo capire quanti elementi sono già presenti.

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

jquery html

— Tom
fonte

225

Provare:

$("#mylist li").length

Solo curioso: perché hai bisogno di conoscere le dimensioni? Non puoi semplicemente usare:

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

?

— Cletus
fonte

3

Sto usando l'aggiunta per aggiungere quelli nuovi, ma ho un limite al numero di elementi che possono essere nell'elenco, in questo stato l'utente può ancora aggiungere fino a un massimo di 4 elementi, ma 2 potrebbero essere arrivati dallo stato precedente. :)

— Tom

35

Si noti che i documenti jQyery raccomandano l'uso di .lengthover .size()per evitare il sovraccarico di una chiamata di funzione. api.jquery.com/size

— Joe

4

size () è stato deprecato in jquery 1.8 e dice di usare length () ora.

— gloomy.penguin

8

@ gloomy.penguin Nota che .lengthnon è una funzione.

— hexacyanide,

Ho bisogno del conteggio <li> per ricalcolare al volo la larghezza dell'elemento.

— Hristo,

51

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

var count = listItems.length;

Ovviamente puoi condensarlo con

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

Per ulteriore assistenza con jQuery, http://docs.jquery.com/Main_Page è un buon punto di partenza.

— Nick Allen
fonte

5

solo per sicurezza, fai $ ("# myList"). children ("li"). length; Se aggiungi altri elementi all'interno dell'elenco per qualsiasi motivo, non dimenticherai di questa piccola riga di codice.

— SgtPooki,

10

Si ottiene lo stesso risultato quando si chiama il metodo .size () o la proprietà .length ma si preferisce la proprietà .length perché non ha l'overhead di una chiamata di funzione. Quindi il modo migliore:

$("#mylist li").length

— Alex Nguyen
fonte

4

Penso che questo dovrebbe farlo:

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

— Andrew Barrett
fonte

4

e ovviamente quanto segue:

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

può essere ridotto a: (rimuovendo 'var' che non è necessario per impostare una variabile)

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

tuttavia questo è più pulito:

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

— ROARSTAR
fonte

2

Questo metodo non sta contando anche i li-tag all'interno di ul-elementi secondari dei primi ul?

— atripes

2

Dire "var" non è necessario per impostare una variabile "semplifica eccessivamente. Se non usi 'var', tutte le tue variabili finiranno per essere globali. Vedi stackoverflow.com/questions/1470488/…

— Rafael Almeida,

3

provare

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

— Nui_CpE
fonte

1

Conta il numero di elementi dell'elenco

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

— M.Ganji
fonte

1

Un altro approccio per contare il numero di elementi dell'elenco:

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>

Espandi frammento

— Penny Liu
fonte

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>

Espandi frammento

— Bashirpour
fonte