javascript - javascript 嵌套 ul li > ul li 搜索
问题描述
我从 w3schools 获得了如下代码。但是我的列表中有嵌套的 ul。这里的代码不起作用。如何使此代码适应嵌套的 ul li?
w3schools 代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
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];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>
我的列表:
<ul id="myUL">
<li>
<a href="#">Adele</a>
<ul>
<li>
<a href="#">Mariam</a>
<ul>
<li>
<a href="#">Andreas</a>
</li>
<li>
<a href="#">Dimitru</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li>
<a href="#">Bob</a>
<ul>
<li>
<a href="#">Alexander</a>
</li>
</ul>
</li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
如您所见,我的列表中嵌套了多个 ul - li。所以搜索系统不工作。我该如何运行它?你在条目上写一个名字。过滤您键入的名称是否在列表中。但是嵌套的 ul -li 不会被过滤掉。我也希望过滤嵌套的 ul -li 。
解决方案
您不能使用display:none
属性,因为它隐藏了li
并且它是子 li,您可以使用可见性代替,检查以下内容:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li>
<a href="#">Adele</a>
<ul>
<li>
<a href="#">Mariam</a>
<ul>
<li>
<a href="#">Andreas</a>
</li>
<li>
<a href="#">Dimitru</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li>
<a href="#">Bob</a>
<ul>
<li>
<a href="#">Alexander</a>
</li>
</ul>
</li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
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(filter) > -1) {
li[i].style.visibility = "visible";
} else {
li[i].style.visibility = "hidden";
}
}
}
</script>
</body>
</html>
推荐阅读
- javascript - “不可迭代”使用钩子从单独的文件夹进行 API 调用
- python - Python/Scipy 中的惰性求值
- javascript - Dropzone 动态允许重复图像
- excel - Can the ImportExcel Powershell module be used to export data in XLS format (as opposed to XLSX)?
- java - 通过排名压缩和排序对象的有效方法是什么?
- swiftui - ScrollView 用白条截断部分视图(SwiftUI)
- laravel - laravel webpack 将所有 sass 文件编译成单个 SASS 文件
- assembly - 编译器资源管理器中的调试信息
- java - 如何用文字制作一个空心正方形?
- reactjs - 更改传入的道具不重新渲染 react-sortable-hoc 列表