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

— Джо

4

size () устарела в jquery 1.8 и теперь говорит, что нужно использовать length () .

— gloomy.penguin

8

@ gloomy.penguin Обратите внимание, что .lengthэто не функция.

— гексацианид

Мне нужно количество <li>, чтобы пересчитать ширину элемента на лету.

— Христо

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; Если вы по какой-либо причине добавите другие элементы в список, вы не забудете эту небольшую строку кода.

— Сержант

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();

— ROARSTAR
источник

2

Разве этот метод также не учитывает li-теги в дочерних ul-элементах top ul?

— Atripes

2

Сказать, что «переменная не обязательна для установки переменной», слишком упрощенно. Если вы не используете 'var', все ваши переменные станут глобальными. См. Stackoverflow.com/questions/1470488/…

— Рафаэль Алмейда

3

пытаться

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

— Nui_CpE
источник

1

Подсчитать количество элементов списка

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

— M.Ganji
источник

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>

Развернуть фрагмент

— Bashirpour
источник