我有以下代码,问题是当我搜索“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>
发布于 2018-07-20 04:20:58
在隐藏元素时,需要考虑嵌套的li
。现在,如果你观察a.innerHTML
返回的值,你会发现由于嵌套的原因,它得到了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>
发布于 2018-07-20 05:22:43
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';
}
}
}
}
https://stackoverflow.com/questions/51430792
复制相似问题