javascript - 如何在 JavaScript 中应用多个 div 元素的过滤

Question

我正在尝试学习 javascript 过滤。但是有一些从页面列表元素进行过滤的很好的示例，但是如何根据搜索输入过滤整个 div 呢？

到目前为止，我已经完成了这些，但我陷入困境，不知道如何进一步进行，我希望您能好心帮助我学习这个过程，提前致谢。

这是fiddle代码片段如下:

const searchBar = document.forms['search-books'].querySelector('input');
searchBar.addEventListener('keyup', function(e) {
    const term = e.target.value.toLocaleLowerCase();
    const books = list.getElementsByTagName('h5');
    Array.from(books).forEach(function(books) {
        const title = book.firstElementChild.textContent;
        if (title.toLowerCase().indexOf(term) != -1) {
            book.style.display = 'block';
        } else {
            book.style.display = 'none';
        }
    })
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<form id="search-books">
	<input type="text" placeholder="Search a book ... ">
</form>
<div class="container">
   <div class="row list-single">
      <div class="col-2"><img src="https://images.gr-assets.com/books/1447303603s/2767052.jpg"/></div>
      <div class="col-10">
         <h5>	The Hunger Games</h5>
         <a href="The-Hunger-Games.html">Learn</a> 
      </div>
   </div>
   <br>
   <div class="row list-single">
      <div class="col-2"><img src="https://images.gr-assets.com/books/1507396732s/2.jpg"/></div>
      <div class="col-10">
         <h5>Harry Potter</h5>
         <a href="Harry-Potter.html">Learn</a> 
      </div>
   </div>
</div>

Answer 1

您需要声明 list 元素或获取带有标签 h5 的所有元素。

由于您想要隐藏或显示该元素，因此您应该使用给定文本定位 div 的父级的父级。

const searchBar = document.forms['search-books'].querySelector('input');
searchBar.addEventListener('keyup', function(e) {
    const term = e.target.value.toLocaleLowerCase();
    const books = document.getElementsByTagName('h5');
    Array.from(books).forEach(function(book) {
        const title = book.textContent;
        if (title.toLowerCase().indexOf(term) != -1) {
            book.parentElement.parentElement.style.display = 'flex';
        } else {
            book.parentElement.parentElement.style.display = 'none';
        }
    })
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<form id="search-books">
	<input type="text" placeholder="Search a book ... ">
</form>
<div class="container">
   <div class="row list-single">
      <div class="col-2"><img src="https://images.gr-assets.com/books/1447303603s/2767052.jpg"/></div>
      <div class="col-10">
         <h5>	The Hunger Games</h5>
         <a href="The-Hunger-Games.html">Learn</a> 
      </div>
   </div>
   <br>
   <div class="row list-single">
      <div class="col-2"><img src="https://images.gr-assets.com/books/1507396732s/2.jpg"/></div>
      <div class="col-10">
         <h5>Harry Potter</h5>
         <a href="Harry-Potter.html">Learn</a> 
      </div>
   </div>
</div>