MC, 17:23 poniedziałek, 11.08.2014 r.
Ilustracja do artykułu: jQuery - Liczenie elementów potomnych (child elements)

jQuery - Liczenie elementów potomnych (child elements)

Kilka słów o tym jak przy pomocy biblioteki jQuery zliczyć obiekty (elementy, węzły) potomne innemu elementowi strony.

Jak zliczyć obiekty potomne (ang. child elements)?

W ostatnim czasie musiałem stworzyć prosty skrypt, który między innymi musiał określić liczbę elementów strony znajdujących się we wskazanym div-ie. Biblioteka jQuery pozwala to zrobić w bardzo elegancki sposób poprzez metodę children(), która zwraca potomne obiekty w postaci tablicy - czyli jak nie trudno się domyślić, następnie wystarczy sprawdzić jej rozmiar.

Wyobraźmy sobie, że mamy na stronie element div zdefiniowany jak poniżej:

<div id="elementNadrzedny">
    <p>Pierwszy paragraf</p>
    <p>Drugi paragraf</p>
    <div>Inne element strony</div>
</div>
Spróbujmy więc zliczyć elementy występujące w div-ie o id "elementNadrzedny":
alert($('div#elementNadrzedny').children().length);

Zgodnie z powyższym przykładem, pokazany kod powinien w alert-cie wyświetlić liczbę 3, bo tyle elementów potomnych znajduje się we wskazanym obiekcie strony.
Warto również wspomnieć, że metoda children() jako argument może przyjąć selektor, dzięki czemu możemy określić jakie dokładnie elementy nas interesują. Dajmy na to, że chodzi nam wyłącznie o paragrafy, czyli znaczniki <p> - spróbujmy je zliczyć:

alert($('div#elementNadrzedny').children('p').length);

Tym razem wyświetlona zostanie liczba 2, gdyż tyle mamy paragrafów we wskazanym elemencie div.

Komentarze (0) - Nikt jeszcze nie komentował - bądź pierwszy!

Imię:
Treść: