JavaScript: Hrabia Produkty w HTML lub list (UL OL)

Użyj JavaScript policzyć elementy LI Wykaz zawarty w listach HTML (UL lub typ OL). Kod ten liczy elementy Li, a następnie można wyświetlić licznik na swojej stronie internetowej.

A+ A-

Mój przyjaciel przysłał mi ogromną listę HTML elementów. Lista ta nie została zamówiona i nie miał wyświetlane z zamówieniem. Ale całkowita liczba elementów w liście HTML miała być wyświetlane na stronie internetowej.

Lista HTML zamawiane (utworzony z tagiem OL) są domyślnie traktowane jako każda pozycja jest poprzedzona jego numer na liście. Ale wykazy tworzone przy użyciu znacznika UL nie są numerowane. Tak więc, musimy się liczyć wszystkie elementy, aby pokazać go do użytkownika.

Jeśli wyświetlanie tej rachubę liście nieuporządkowanej elementy na swojej stronie -Nie może chcesz zaktualizować Hrabia każdym razem aktualizować listę. Tak więc, dynamiczne rozwiązanie jest korzystne w takim przypadku. Z pomocą JavaScript można wykonać to zadanie bardzo łatwo.

JavaScript jest piękne!

JavaScript jest piękne!

Logika jest prosta. Co możemy zrobić, to po prostu, aby uzyskać uchwyt na liście chcesz liczyć, a następnie przejść przez węzły (czyli elementów listy), natomiast zwiększany licznik. Gdy pętla jest wykonane, zmienna licznika będzie zawierać całkowitą ilość elementów. Następnie można wydrukować licznik gdziekolwiek chcesz na swojej stronie internetowej.

Wklej następujący kod JavaScript w sekcji HEAD strony:

<script type='text/javascript'>
function countItems(listID){
var ul = document.getElementById(listID);
var i=0, itemCount =0;
while(ul.getElementsByTagName('li') [i++]) itemCount++;
document.write(itemCount);
}
</script>

A teraz umieścić następujący kod w miejscu, w którym chcesz wyświetlić licznik.

<script> countItems('my-html-list')</script>

ZOBACZ TAKŻE: losowy pozycji w liście HTML

Upewnij się, że zastąpi 'mój-html-list' z id listy. Można mieć dowolny identyfikator listy. Należy również pamiętać, że można użyć tej funkcji uporządkowanych list :-) To działa na wszystkich listach obu typów, ponieważ oba wykazy zawierają elementy li.

Mam nadzieję, że ten fragment kodu była przydatna dla Ciebie. Daj mi znać, jeśli masz jakieś problemy z nim. Dziekujemy za korzystanie TechWelkin.