简单的javascript过滤/搜索多个列表而不是一个？

我有一些简单的代码，允许过滤列表项，它几乎完美地工作。唯一的问题是搜索框只搜索第一个UL，如何使其同时搜索这两个UL

Javascript:

<script>
function myFunction() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName('li');

    // Loop through all list items, and hide those who don't match the search query
    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";
        }
    }
}
</script>

HTML:

---

首先使用唯一ID和相同的类

<ul id="myUL1" class="ul">
  <li><a href="#">bob</a></li>
  <li><a href="#">rob</a></li>

  <li><a href="#">tom</a></li>
  <li><a href="#">mark</a></li>
</ul>

<ul id="myUL2" class="ul">
  <li><a href="#">purse</a></li>
  <li><a href="#">cat</a></li>

  <li><a href="#">pencil</a></li>
  <li><a href="#">sharpner</a></li>
</ul>

然后修改脚本以针对所有LI，而不考虑UL，只要它具有该类

function myFunction() {

  var input  = document.getElementById('myInput'),
      filter = input.value.toUpperCase(),
      li     = document.querySelectorAll(".ul li");

  // Loop through all list items, and hide those who don't match the search query
  for (var i = 0; i < li.length; i++) {
    var a = li[i].querySelector("a");

    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

---

您可以使用document.querySelector选择两个列表的子项：

函数myFunction{ var query=document.querySelector'myInput'。值； //这将从页面上的所有元素中获取所有元素 //但是，您需要仅为希望包含的元素指定唯一属性 var elements=document.queryselectoral'ul>li'； 对于变量i=0；ifunction myFunction() { var input = document.getElementById('myInput'), filter = input.value.toUpperCase(), li = document.querySelectorAll(".ul li"); // Loop through all list items, and hide those who don't match the search query for (var i = 0; i < li.length; i++) { var a = li[i].querySelector("a"); if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } }