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 рекомендують використовувати .lengthбільше, .size()щоб уникнути накладних витрат функціонального виклику. api.jquery.com/size

— Джо

4

розмір () був застарілий у 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"). діти ("li"). довжина; Якщо ви коли-небудь додасте інші елементи до списку з будь-якої причини, ви не забудете про цей невеликий рядок коду.

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

— ROARSTAR
джерело

2

Чи не цей метод також підраховує li-теги в дочірніх елементах верхнього ul?

— атрип

2

Казання "" var "не потрібно для встановлення змінної" є надто спрощеним. Якщо ви не використовуєте "var", всі ваші змінні стануть глобальними. Дивіться stackoverflow.com/questions/1470488/…

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

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>

Розгорніть фрагмент

— Баширпур
джерело