jQuery querySelectorAll无法正常工作？

Question

我正在尝试为我的导航栏创建一个简单的过滤器，我有以下内容但似乎无法正常工作：

$("input[id='gameSearch']").on('keydown', function(e) {
          var input, filter, ul, li, a, i;
          input = $(this);
          filter = input.val().toUpperCase();
          div = $('#gamesDropdown');
          a = div.querySelectorAll("li a");
          for (i = 0; i < a.length; i++) {
              if (a[i].html().toUpperCase().indexOf(filter) > -1) {
                  a[i].style.display = "";
              } else {
                  a[i].style.display = "none";
              }
          }
      });

我的HTML布局如下：

<ul id="gamesDropdown">
    <li>
        <input type="text" id="gameSearch" placeholder="Search...">
    <li>
    <li>
        <a href="#blah">Blah blah</a>
    <li>
    <li>
        <a href="#blah">Blah blah</a>
    <li>
    <li>
        <a href="#blah">Blah blah</a>
    <li>
</ul>

错误是：

Uncaught TypeError: div.querySelectorAll is not a function

这是否已被弃用或我只是错误地使用它？

Answer 1

querySelectorAll适用于vanilla js，您可以这样做：

a = div.get().querySelectorAll("li a");

然后坚持使用香草js，或者你可以做

a = div.find("li a");

然后a将成为jQuery对象，因此您可以像稍后在代码中那样执行.html()，但它必须像：

a = div.find("li a");
a.each(function() {
    if ($(this).html().toUpperCase().indexOf(filter) > -1) {
       $(this).css('display', '');
    } else {
       $(this).css('display', 'none');
    }

})

Answer 2

使用get()方法获取对DOM元素的引用：

$("input[id='gameSearch']").on('keydown', function(e) {
          var input, filter, ul, li, a, i;
          input = $(this);
          filter = input.val().toUpperCase();
          div = $('#gamesDropdown');
          a = div.get(0).querySelectorAll("li a");
          for (i = 0; i < a.length; i++) {
              if ($(a[i]).html().toUpperCase().indexOf(filter) > -1) {
                  a[i].style.display = "";
              } else {
                  a[i].style.display = "none";
              }
          }
      });