如何在多个内部搜索<；ul>；元素<；李>；使用javascript

这里的编程高手非常棒。我仍然处于一种奇怪的状态，你使用了很多来自互联网的代码，却不知道该怎么做。我想做的是：我有2个

元素（或多个），我希望能够在每个元素中搜索一个

元素

发生的情况：过滤器仅在第一个

元素上工作，而不在第二个元素上工作

我知道我必须为创建某种类型的

，首先搜索所有
元素，然后在每个元素内部搜索。但我不知道怎么做：(

无论如何，我使用的代码如下：


<h2>My Phonebook</h2>

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

<ul class="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>

<ul class="myUL">
  <li><a href="#">Daniel</a></li>
  <li><a href="#">Danielle</a></li>

  <li><a href="#">Ernest</a></li>
  <li><a href="#">Eric</a></li>

  <li><a href="#">Fabio</a></li>
  <li><a href="#">Ferdinand</a></li>
  <li><a href="#">Frederick</a></li>
</ul>

<script>
function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.document.querySelector(".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> ```


我的电话簿


















函数myFunction（）{
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.document.querySelector（“.myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}
```
您可以使用querySelectorAll而不是querySelector来检查所有uls：

var uls = document.querySelectorAll("ul");

for(var x = 0; x < uls.length; x++){
    var lis = uls[x].querySelectorAll("li");
    for(var y = 0; y < lis.length; y++){
        var a = lis[y].querySelector('a');
        // Do your stuff here
    }
}

var-uls=document.queryselectoral（“ul”）；
对于（变量x=0；x
您可以使用querySelectorAll而不是querySelector来检查所有uls：

var uls = document.querySelectorAll("ul");

for(var x = 0; x < uls.length; x++){
    var lis = uls[x].querySelectorAll("li");
    for(var y = 0; y < lis.length; y++){
        var a = lis[y].querySelector('a');
        // Do your stuff here
    }
}

var-uls=document.queryselectoral（“ul”）；
对于（变量x=0；x
这可以在现代JavaScript和DOM中非常简单地完成：


函数myFunction（）{
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
//获取“myUL”元素包含的所有li元素
文件.查询选择器所有（“myUL li”）
//对它们进行迭代
.forEach（l=>l
//在具有以下属性的li项上切换“隐藏”类
.classList.toggle（“隐藏”，
//一种锚定标记，其文本包括在文本框中键入的文本
！l.querySelector（“a”）.textContent.toUpperCase（）.includes（filter））；
}
.hidden{display:none；}
我的电话簿

















这可以在现代JavaScript和DOM中非常简单地完成：


函数myFunction（）{
var输入、滤波器、ul、li、a、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
//获取“myUL”元素包含的所有li元素
文件.查询选择器所有（“myUL li”）
//对它们进行迭代
.forEach（l=>l
//在具有以下属性的li项上切换“隐藏”类
.classList.toggle（“隐藏”，
//一种锚定标记，其文本包括在文本框中键入的文本
！l.querySelector（“a”）.textContent.toUpperCase（）.includes（filter））；
}
.hidden{display:none；}
我的电话簿

















请注意，在互联网的许多领域，使用所有大写字母都被视为大喊大叫。如果这不是你的意图，你可能会想要发表你的文章。谢谢@HereticMonkey，我编辑它请注意，在互联网的许多领域，使用所有大写字母都被视为大喊大叫。如果这不是你的意图，你可能会想要发表你的文章。谢谢@HereticMonkey，我编辑它谢谢非常感谢！超级干净的代码和它完美的工作！非常感谢！超级干净的代码和它完美的工作！