Traversing unordered list using Javascript
Question
I have an unordered nested list
I want to count these nested lists in such a way that inside <li>Animals</li> there are 19 animals inside this li . I wanted to count all li having the name of animals using Javascript . How should I proceed?
<ul> <li> Animals <ul> <li> Mammals <ul> <li>Apes <ul> <li>Chimpanzee</li> <li>Gorilla</li> <li>Orangutan</li> </ul> </li> <li>Coyotes</li> <li>Dogs</li> <li>Elephants</li> <li>Horses</li> <li>Whales</li> </ul> </li> <li> Other <ul> <li> Birds <ul> <li>Albatross</li> <li>Emu</li> <li>Ostrich</li> </ul> </li> <li>Lizards</li> <li>Snakes</li> </ul> </li> </ul> </li> <li>Fish <ul> <li>Goldfish</li> <li>Salmon</li> <li>Trout</li> </ul> </li> </ul>
1 answers
solution1
0 2020-10-02 14:11:50
@mplungjan put forward this solution in the comments and it works. document.querySelectorAll("ul")[1].querySelectorAll("li").length
this gives 17 which is the correct count (after clarification in comments which overrode the first count given which was 19).
The question asks about traversing and we show that step by step here so as to help with more general solutions.
We first have to find the element which is holding all the other lists. I have assumed that that ul element is the first in the document. In the general case we'd probably find such an element by knowing it's id or its class.
We then find the li element which is associated with Animals and again we assume it's the first one, as it is in the HTML given. However, if it was to be more sophisticated you'd want to look for the li element that has Animals as its innerHTML.
We then find the associated lis and count them.
Here is the code and you can run the snippet to see it gets to 17 (which was clarified in comments, the original count in the question was given as 19, also clarified was that this has nothing to do with counting actual animal names, only to do with counting li elements).
<!DOCTYPE html> <html> <body> <ul> <li> Animals <ul> <li> Mammals <ul> <li>Apes <ul> <li>Chimpanzee</li> <li>Gorilla</li> <li>Orangutan</li> </ul> </li> <li>Coyotes</li> <li>Dogs</li> <li>Elephants</li> <li>Horses</li> <li>Whales</li> </ul> </li> <li> Other <ul> <li> Birds <ul> <li>Albatross</li> <li>Emu</li> <li>Ostrich</li> </ul> </li> <li>Lizards</li> <li>Snakes</li> </ul> </li> </ul> </li> <li>Fish <ul> <li>Goldfish</li> <li>Salmon</li> <li>Trout</li> </ul> </li> </ul> <script> var firstUL = document.getElementsByTagName('UL')[0]; //assuming the whole list is the first UL in the document var animalsLI = firstUL.getElementsByTagName('LI')[0]; var animalsLIUL = animalsLI.getElementsByTagName('UL')[0]; var animalsLIs = animalsLI.getElementsByTagName('LI'); alert('The count of LIs is ' + animalsLIs.length); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.