jQuery: ¿Contar el número de elementos de la lista?

134

Tengo una lista que se genera a partir de algún código del lado del servidor, antes de agregarle cosas adicionales con jQuery, necesito averiguar cuántos elementos ya están en él.

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

jquery html

— Tom
fuente

225

Tratar:

$("#mylist li").length

Solo curiosidad: ¿por qué necesitas saber el tamaño? ¿No puedes usar:

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

?

— cletus
fuente

3

Estoy usando el agregado para agregar los nuevos, pero tengo un límite en la cantidad de elementos que pueden estar en la lista, en este estado el usuario aún puede agregar hasta un máximo de 4 elementos, pero 2 podrían haber llegado del estado anterior. :)

— Tom

35

Tenga en cuenta que los documentos de jQyery recomiendan usar .lengthover .size()para evitar la sobrecarga de una llamada de función. api.jquery.com/size

— Joe

44

size () fue desaprobado en jquery 1.8 y ahora dice que use length () .

— gloomy.penguin

8

@ gloomy.penguin Tenga en cuenta que .lengthno es una función.

— hexacianuro

Necesito el recuento <li> para volver a calcular el ancho del elemento sobre la marcha.

— Hristo

51

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

var count = listItems.length;

Por supuesto que puedes condensar esto con

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

Para obtener más ayuda con jQuery, http://docs.jquery.com/Main_Page es un buen lugar para comenzar.

— Nick Allen
fuente

55

solo para estar seguro, haga $ ("# myList"). children ("li"). length; Si alguna vez agrega otros elementos dentro de la lista por alguna razón, no se olvidará de esta pequeña línea de código.

— SgtPooki

10

Tiene el mismo resultado al llamar al método .size () o la propiedad .length, pero se prefiere la propiedad .length porque no tiene la sobrecarga de una llamada a la función. Entonces la mejor manera:

$("#mylist li").length

— Alex Nguyen
fuente

4

Creo que esto debería hacerlo:

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

— Andrew Barrett
fuente

4

y por supuesto lo siguiente:

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

se puede condensar a: (eliminando la 'var' que no es necesaria para establecer una variable)

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

Sin embargo, esto es más limpio:

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

— ROARSTAR
fuente

2

¿No es este método contando también las etiquetas li dentro de los elementos ul secundarios del ul superior?

— atripes

2

Decir "'var' no es necesario para establecer una variable" es simplificar demasiado. Si no usa 'var', todas sus variables terminarán siendo globales. Ver stackoverflow.com/questions/1470488/…

— Rafael Almeida

3

tratar

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

— Nui_CpE
fuente

1

Cuenta el número de elementos de la lista

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

— M.Ganji
fuente

1

Otro enfoque para contar el número de elementos de la lista:

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>

Expandir fragmento

— Penny Liu
fuente

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>

Expandir fragmento

— Bashirpour
fuente