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

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

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