使用Javascript遍歷無序列表
[英]Traversing unordered list using Javascript
問題描述
我有一個無序列表的嵌套列表
我想以這樣的方式計算這些嵌套列表：在<li>Animals</li> ，這個li 中有 19 只動物。 我想使用Javascript計算所有具有動物名稱的li 。 我應該如何進行？
<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 個解決方案
解決方案1
0 2020-10-02 14:11:50
@mplungjan 在評論中提出了這個解決方案並且它有效。 document.querySelectorAll("ul")[1].querySelectorAll("li").length
這給出了 17，這是正確的計數（在評論中澄清后，它覆蓋了給出的第一個計數，即 19）。
這個問題是關於遍歷的，我們在這里一步一步地展示，以幫助解決更通用的問題。
我們首先必須找到保存所有其他列表的元素。 我假設 ul 元素是文檔中的第一個元素。 在一般情況下，我們可能會通過知道它的 id 或它的類來找到這樣一個元素。
然后我們找到與 Animals 關聯的 li 元素，我們再次假設它是第一個，因為它在給定的 HTML 中。 但是，如果要更復雜一些，您需要查找以 Animals 作為其內部 HTML 的 li 元素。
然后我們找到相關的 lis 並計算它們。
這是代碼，您可以運行該代碼段以查看它達到 17（在注釋中已澄清，問題中的原始計數為 19，還澄清的是這與計算實際動物名稱無關，僅與計數 li 元素有關）。
<!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>
使用Javascript / Jquery遍歷無序列表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.