Question

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

但是，当我搜索“鲍勃”时，我只有两个父级“鲍勃”。为什么搜索循环仅在每个级别的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>

Answer 1

隐藏元素时，您需要考虑嵌套的li。现在，如果您看到a.innerHTML返回的值，您会发现它由于嵌套而获得Billy的4倍。结果，当您隐藏父项li的Billy被首先击中时，包含Bob的子项li也会被隐藏。

修改了代码段以引用a的父级，而不是直接查看所有li标签。

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>

Answer 2

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';
            }
        }
    }
}

多个子级别的ul li标签内的html过滤器搜索

2 个答案: