Как я могу подсчитать количество детей?

108

У меня есть список

<ul>
  <li>
  <li>
  <li>
  ...
</ul>

Мне нужен jQuery для подсчета количества элементов в моем списке.

aneuryzm
источник
1
забыть jquerydocument.querySelectorAll('ul li').length
caub

Ответы:

188

Вы можете использовать .lengthвот так:

var count = $("ul li").length;

.lengthсообщает, сколько совпадений найдено в селекторе, поэтому это подсчитывает, сколько <li>у <ul>вас есть дочерних элементов ... если есть дочерние элементы, используйте "ul > li"вместо этого, чтобы получить только прямые дочерние элементы . Если у вас есть другие <ul>элементы на вашей странице, просто измените селектор, чтобы он соответствовал только его, например, если у него есть идентификатор, который вы бы использовали "#myListID > li".

В других ситуациях, когда вы не знаете дочерний тип, вы можете использовать *селектор (подстановочный знак) или .children(), например, так:

var count = $(".parentSelector > *").length;

или:

var count = $(".parentSelector").children().length;
Ник Крейвер
источник
1
Что, если не известно, что ребенок «Ли», и может быть кем угодно?
Starx
7
@Starx:$("#parent").children().length
rekamoyka
1
@AlecAnanian, Нет, я знаю как. То есть, я надеялся, что Ник тоже добавит это к своему ответу.
Starx
2
@Starx - добавлено на случай, если это поможет нескольким людям в будущем :)
Ник Крейвер
Что делать, если элемент не виден?
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
6

Для этого вам не нужен jQuery. Вы можете использовать JavaScript .childNodes.length.

Просто не забудьте вычесть 1, если вы не хотите включать текстовый узел по умолчанию (который по умолчанию пуст). Таким образом, вы должны использовать следующее:

var count = elem.childNodes.length - 1;
Зак Сосье
источник
1

Попробуйте использовать:

var count = $("ul > li").size();
alert(count);

источник
0

Что, если вы используете это, чтобы определить текущий селектор, чтобы найти его дочерние элементы, чтобы это было так: <ol>тогда есть вопросы о том, <li>как написать селектор, который не var count = $(this+"> li").length;будет работать ..

Oguzhan
источник
если у ol есть класс, вы можете написать$("ol.class > li").length
Qwerty
0

Вы можете сделать это с помощью jQuery:

Этот метод получает список своих дочерних элементов, а затем подсчитывает длину этого списка, так просто.

$("ul").find("*").length;

Метод find () просматривает DOM вниз по потомкам, вплоть до последнего потомка.

Примечание: метод children () проходит один уровень вниз по дереву DOM.

Юссоф Х.
источник