如何在html过滤器搜索多个子级别ul li标签?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (213)

我有以下代码,问题是当我搜索“Billy”时,我得到所有三个“Billy”,这是我所期望的。

但是当我搜索“Bob”时,我只得到两个父级“Bob”。为什么搜索循环只搜索每个级别的Bill而不是Bob?

现在,只有一个子列表,这将增加到很多。我想要的是在所有级别执行搜索

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li>
  	<ul>
    	<li><a href="#">Billy</a></li>
  		<li><a href="#">Bob</a></li>
    </ul>
  </li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

</ul>

提问于
用户回答回答于
function myFunction() {
    var input = document.getElementById("myInput");
    var filter = input.value.toUpperCase();  
    var ul = document.getElementById("myUL");      
    var li = ul.getElementsByTagName('li');

    for (var i = 0; i < li.length; i++) {
        var name = li[i].innerHTML;
        var parent =li[i].parentElement;

        if(parent.tagName == "UL"){
            if (name.toUpperCase().indexOf(filter) >= 0) {
                li[i].style.display = '';
            }
            else{
                li[i].style.display = 'none';
            }
        }
    }
}
用户回答回答于

li隐藏元素时需要考虑嵌套。现在,如果你通过a.innerHTML可以看到你返回的值。你会看到它因为nest而得到Billy4次。因此,当你隐藏父liBilly首先被使用时,li包含Bob 的子项也会被隐藏。

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            a.parentElement.style.display = "";
        } else {
            a.parentElement.style.display = "none";
        }
    }
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li>
  	<ul>
    	<li><a href="#">Billy</a></li>
  		<li><a href="#">Bob</a></li>
<li><ul><li><a href="#">Bob</a></li>
<li><a href="#">Billy</a></li>
</ul></li>
    </ul>
  </li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

</ul>

扫码关注云+社区

领取腾讯云代金券