Jak mogę policzyć liczbę dzieci?

108

Mam listę

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

Potrzebuję jQuery, aby policzyć liczbę elementów na mojej liście.

jquery aneuryzm
źródło
1
zapomnij o jquerydocument.querySelectorAll('ul li').length
caub

Odpowiedzi:

188

Możesz użyć w .lengthten sposób:

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

.lengthmówi ile odnalezione selektor, więc liczy się ile <li>pod <ul>elementami masz ... jeśli istnieją podgrupy dzieci, stosowanie "ul > li"zamiast dostać tylko bezpośrednie dzieci. Jeśli masz inne <ul>elementy na swojej stronie, po prostu zmień selektor, aby pasował tylko do jego, na przykład jeśli ma identyfikator, którego chcesz użyć "#myListID > li".

W innych sytuacjach, gdy nie znasz typu dziecka, możesz użyć *selektora (wieloznacznego) lub .children(), na przykład:

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

lub:

var count = $(".parentSelector").children().length;
Nick Craver
źródło
1
A jeśli nie wiadomo, że dziecko jest „li” i może być wszystkim?
Starx
7
@Starx:$("#parent").children().length
rekamoyka
1
@AlecAnanian, Nie, wiem jak. Chodzi mi o to, że miałam nadzieję, że Nick doda to również do swojej odpowiedzi.
Starx
2
@Starx - dodane na wypadek, gdyby pomogło kilku osobom w drodze :)
Nick Craver
A jeśli element nie jest widoczny?
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
6

Nie potrzebujesz do tego jQuery. Możesz użyć JavaScript .childNodes.length.

Po prostu pamiętaj, aby odjąć 1, jeśli nie chcesz uwzględniać domyślnego węzła tekstowego (który jest domyślnie pusty). Dlatego użyłbyś:

var count = elem.childNodes.length - 1;
Zach Saucier
źródło
1

Spróbuj użyć: 

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

źródło
0

A co, jeśli używasz tego do określenia bieżącego selektora w celu znalezienia jego dzieci, więc to się zgadza: w takim razie <ol>jest <li>jak napisać selektor var count = $(this+"> li").length;nie zadziała.

Oguzhan
źródło
jeśli ol ma zajęcia, możesz napisać$("ol.class > li").length
Qwerty
0

Możesz to zrobić za pomocą jQuery:

Ta metoda pobiera listę swoich dzieci, a następnie zlicza długość tej listy, tak proste.

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

Metoda find () przemierza DOM w dół wzdłuż potomków, aż do ostatniego potomka.

Uwaga: metoda children () przemierza jeden poziom w dół drzewa DOM.

Youssof H.
źródło