JavaScript: Count articoli in HTML List (UL o OL)

Utilizzare JavaScript per contare lista LI articoli in elenchi HTML (UL o tipo OL). Questo codice conta elementi LI e quindi è possibile visualizzare contare sulla vostra pagina web.

A+ A-

Un mio amico mi ha inviato una massiccia lista di elementi HTML. Questo elenco non è stato ordinato e non doveva visualizzato come ordinato. Ma il numero totale di elementi nella lista HTML è stato quello di essere visualizzato sulla pagina web.

Lista HTML ordinata (creato con tag OL) sono per default contato come ogni elemento è preceduto dal suo numero nella lista. Ma le liste create utilizzando tag UL non sono numerati. Quindi, abbiamo bisogno di contare tutti gli elementi per mostrare all'utente.

Se si sta visualizzando questo conteggio di voci di elenco non ordinate sulla tua pagina -Non può decidere di aggiornare il conteggio ogni volta che si aggiorna la lista. Quindi, una soluzione dinamica è preferito in una tale situazione. Con l'aiuto di JavaScript è possibile eseguire questa operazione molto facilmente.

JavaScript è bello!

JavaScript è bello!

La logica è semplice. Quello che fondamentalmente facciamo è quello di ottenere la maniglia della lista che si desidera contare e poi a piedi attraverso i nodi (cioè oggetti della lista), mentre l'incremento di un contatore. Quando il ciclo è fatto, variabile contatore contiene il numero totale di elementi. Quindi è possibile stampare questo conteggio dove vuoi sulla tua pagina web.

Incollare il seguente codice JavaScript nella sezione head della pagina:

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

E ora inserire il seguente codice nel punto in cui si desidera visualizzare il conteggio.

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

VEDI ANCHE: Randomize le voci in un elenco HTML

Assicurati di sostituire 'my-html-list' con l'id della vostra lista. Si può avere qualsiasi ID per la vostra lista. Inoltre, tieni presente, che è possibile utilizzare questa funzione su liste ordinate :-) Funziona su tutti i due tipi di elenchi perché entrambi gli elenchi contengono elementi LI.

Spero che questo pezzo di codice è stato utile per voi. Non fatemi sapere se avete qualche problema con esso. Grazie per aver usato TechWelkin.