Question

我已经在搜索栏上做了一些工作，并且正在工作。现在，我想使用forEach()或filter()而不是使用纯Java语言进行for循环。这是我的HTML和JS代码。有人可以帮我吗？

function myFunction() {
  let input = document.getElementById('mySearch');
  let bind = input.value.toUpperCase();

  let ul = document.getElementById('myMenu');
  let li = ul.getElementsByTagName('li');

  for (let i = 0; i < li.length; i++) {
    let a = li[i].getElementsByTagName('a')[0];

    if (a.innerHTML.toUpperCase().indexOf(bind) > -1) {
      li[i].style.display = ''
    } else {
      li[i].style.display = 'none';
    }
  }
}

<input type="text" onkeyup="myFunction()" id="mySearch" placeholder="Search.." title="Type in a category">
<ul id="myMenu">
  <li>
    <a href="#">HTML</a>
  </li>
  <li>
    <a href="#">CSS</a>
  </li>
  <li>
    <a href="#">JavaScript</a>
  </li>
  <li>
    <a href="#">PHP</a>
  </li>
  <li>
    <a href="#">Python</a>
  </li>
  <li>
    <a href="#">jQuery</a>
  </li>
  <li>
    <a href="#">SQL</a>
  </li>
  <li>
    <a href="#">Bootstrap</a>
  </li>
  <li>
    <a href="#">Node.js</a>
  </li>
</ul>

Answer 1

将li的集合转换为数组，或者使用querySelectorAll，它返回NodeList，在较新的浏览器中具有forEach方法：

function myFunction() {
  let input = document.getElementById('mySearch');
  let bind = input.value.toUpperCase();

  document.querySelectorAll('#myMenu > li').forEach((li) => {
    if (li.textContent.includes(bind)) li.style.display = ''
    else li.style.display = 'none';
  });
}

<input type="text" onkeyup="myFunction()" id="mySearch" placeholder="Search.." title="Type in a category">
<ul id="myMenu">
  <li>
    <a href="#">HTML</a>
  </li>
  <li>
    <a href="#">CSS</a>
  </li>
  <li>
    <a href="#">JavaScript</a>
  </li>
  <li>
    <a href="#">PHP</a>
  </li>
  <li>
    <a href="#">Python</a>
  </li>
  <li>
    <a href="#">jQuery</a>
  </li>
  <li>
    <a href="#">SQL</a>
  </li>
  <li>
    <a href="#">Bootstrap</a>
  </li>
  <li>
    <a href="#">Node.js</a>
  </li>
</ul>

如果您有一个类似数组的集合并想将其转换为数组，则可以使用Array.from。关闭原始代码：

function myFunction() {
  let input = document.getElementById('mySearch');
  let bind = input.value.toUpperCase();

  let ul = document.getElementById('myMenu');
  let lis = ul.getElementsByTagName('li');
  Array.from(lis).forEach((li) => {
    let a = li.getElementsByTagName('a')[0];

    if (a.innerHTML.toUpperCase().indexOf(bind) > -1) {
      li.style.display = ''
    } else {
      li.style.display = 'none';
    }
  });
}

<input type="text" onkeyup="myFunction()" id="mySearch" placeholder="Search.." title="Type in a category">
<ul id="myMenu">
  <li>
    <a href="#">HTML</a>
  </li>
  <li>
    <a href="#">CSS</a>
  </li>
  <li>
    <a href="#">JavaScript</a>
  </li>
  <li>
    <a href="#">PHP</a>
  </li>
  <li>
    <a href="#">Python</a>
  </li>
  <li>
    <a href="#">jQuery</a>
  </li>
  <li>
    <a href="#">SQL</a>
  </li>
  <li>
    <a href="#">Bootstrap</a>
  </li>
  <li>
    <a href="#">Node.js</a>
  </li>
</ul>

Answer 2

这里没有理由使用filter，因为您没有尝试创建数组，也没有充分的理由曾经使用forEach。如果您要简化代码，请使用for … of循环来隐藏/显示项目：

function myFunction() {
  const input = document.getElementById('mySearch').value.toUpperCase();

  const items = document.getElementById('myMenu').getElementsByTagName('li');
  for (const li of items) {
    let a = li.getElementsByTagName('a')[0];
    li.style.display = a.innerHTML.toUpperCase().includes(input) ? '' : 'none';
  }
}

我该如何通过forEach（）？

2 个答案: