javascript嵌套ulli>ulli搜索 -有解無憂

我從w3schools獲得了如下代碼。但我的串列中有嵌套的ul，這里的代碼對它不起作用。我怎樣才能使這段代碼適用于嵌套的 ul li？

w3schools代碼：

<!DOCTYPE html> 
<html> 
<head> 
< meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 

<h2>我的電話簿</h2>

< input type="text"/span> id="myInput" onkeyup="myFunction()" placeholder="Search for names。 ." title="輸入一個名字"> title="輸入一個名字">

<ul id="myUL"> 
  <li><a href="#"/span>> Adele</a></li>/span>
  <li><ahref="#"/span>> Agnes</a></li>/span>

  <li><ahref="#"/span>> Billy</a></li>>
  <li><ahref="#"/span>> Bob</a></li>/span>

  <li><ahref="#"/span>> Calvin</a></li>/span>
  <li><ahref="#"/span>> Christina</a>/span></li>
  <li><ahref="#"/span>> Cindy</a></li>/span>
</ul>/span>

<script>
function myFunction（） {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput"/span>)。
    filter = input.value.toUpperCase（）。
    ul = document.getElementById("myUL"/span>)。
    li = ul.getElementsByTagName("li") 。
    for（i = 0; i < li.length; i  ） {
        a = li[i].getElementsByTagName("a")[0] 。
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf（過濾器）> -1) {
            li[i].style.display = ""/span>;
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>>

</body> 
</html>

我的名單：

<ul id="myUL"> 
    <li>/span>
        <a href="#"/span>> Adele</a>/span>
        <ul>/span>
            <li>/span>
                <a href="#"/span>> Mariam</a>/span>
                <ul>/span>
                    <li>/span>
                        <a href="#"/span>> Andreas</a>/span>
                    </li>/span>
                    <li>/span>
                        <a href="#"/span>> Dimitru</a> 
                    </li>/span>
                </ul>/span>
            </li>/span>
        </ul>/span>
    </li>/span>
    <li><a href="#"> Agnes</a></li>/span>
    <li><ahref="#"/span>> Billy</a></li>>
    <li> 
      <a href="#"/span>> Bob</a>。
      <ul>/span>
          <li>/span>
              <a href="#"/span>> Alexander</a>/span>
          </li>/span>
      </ul>/span>
    </li>/span>
    <li><a href="#"> Calvin</a></li>/span>
    <li><ahref="#"/span>> Christina</a>/span></li>
    <li><ahref="#"/span>> Cindy</a></li>/span>
</ul>

正如你所看到的，我有多個ul - li嵌套在我的串列中。因此，搜索系統是不作業的。我如何運行它？你在條目上寫一個名字。如果你輸入的名字在串列中，就會被過濾，但嵌套的ul -li不會被過濾掉。我希望嵌套的ul -li也能被過濾掉。

uj5u.com熱心網友回復：

你不能使用display:none屬性，因為它隱藏了li和它的子li，你可以使用visibility代替。請看下面的內容：

<!DOCTYPE html> <html> <head> < meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>我的電話簿</h2> < input type="text"/span> id="myInput" onkeyup="myFunction()" placeholder="Search for names。 ." title="輸入一個名字"> title="輸入一個名字"> <ul id="myUL"> <li>/span> <a href="#"/span>> Adele</a>/span> <ul>/span> <li>/span> <a href="#"/span>> Mariam</a>/span> <ul>/span> <li>/span> <a href="#"/span>> Andreas</a>/span> </li>/span> <li>/span> <a href="#"/span>> Dimitru</a> </li>/span> </ul>/span> </li>/span> </ul>/span> </li>/span> <li><a href="#"> Agnes</a></li>/span> <li><ahref="#"/span>> Billy</a></li>> <li> <a href="#"/span>> Bob</a>。 <ul>/span> <li>/span> <a href="#"/span>> Alexander</a>/span> </li>/span> </ul>/span> </li>/span> <li><a href="#"> Calvin</a></li>/span> <li><ahref="#"/span>> Christina</a>/span></li> <li><ahref="#"/span>> Cindy</a></li>/span> </ul>/span> <script> function myFunction（） { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"/span>)。 filter = input.value.toUpperCase（）。 ul = document.getElementById("myUL"/span>)。 li = document.querySelectorAll(li')。 for (i = 0; i < li.length; i ) { a = li[i].getElementsByTagName("a")[0] 。 txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf（過濾器）> -1) { li[i].style.visibility = " visible"; } else { li[i].style.visibility = "hidden"; } } } </script>> </body> </html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/321634.html

標籤：

上一篇：如何通過點擊一個特定的元素來輸出一個特定的元素值到console.log中

下一篇：如何修復點擊時動態改變高度的工具提示？