javascript - 从 HTML DOM 内容中过滤搜索结果

Question

我正在为俱乐部管理设计一个网站，并想为其添加搜索过滤器功能，我如何使用 JavaScript 来实现，以便我可以通过键入俱乐部名称(即“figcaption”)来过滤搜索结果“标签)？

<div class="row">
    <span class="border">
            <figure class="figure">
                    <a href="#"><img src="https://picsum.photos/id/437/200/200" class="figure-img img-fluid rounded" alt=""></a>                         
                    <figcaption class="figure-caption">CLUB 5</figcaption>
            </figure>
    </span>
    <span class="border">
            <figure class="figure">
                    <a href="#"><img src="https://picsum.photos/id/437/200/200" class="figure-img img-fluid rounded" alt=""></a>                         
                    <figcaption class="figure-caption">CLUB 6</figcaption>
            </figure>
    </span>
    <span class="border">
            <figure class="figure">
                    <a href="#"><img src="https://picsum.photos/id/437/200/200" class="figure-img img-fluid rounded" alt=""></a>                         
                    <figcaption class="figure-caption">CLUB 7</figcaption>
            </figure>
    </span>
    <span class="border">
            <figure class="figure">
                    <a href="#"><img src="https://picsum.photos/id/437/200/200" class="figure-img img-fluid rounded" alt=""></a>                         
                    <figcaption class="figure-caption">CLUB 8</figcaption>
            </figure>
    </span>
</div>

Answer 1

您可以尝试这样的操作，创建一个搜索栏并调用该函数。

function tagsearch(caption) {
  let result = document.querySelectorAll("span")
  result.forEach((ele) => {
    if (ele.childNodes[1].childNodes[3].textContent.trim() === caption) {
      ele.style.display = "block"
    } else {
      ele.style.display = "none"
    }
  })
}

<div><input type="text" id="search" onchange="tagsearch(this.value)"></div>
<div class="row" id="add">
  <span class="border">
 <figure class="figure">
 <a href="#"><img src="https://picsum.photos/id/437/200/200" class="figure-img img-fluid rounded" alt=""></a> 
 <figcaption class="figure-caption">CLUB 5</figcaption>
 </figure>
 </span>
  <span class="border">
 <figure class="figure">
 <a href="#"><img src="https://picsum.photos/id/437/200/200" class="figure-img img-fluid rounded" alt=""></a> 
 <figcaption class="figure-caption">CLUB 6</figcaption>
 </figure>
 </span>
  <span class="border">
 <figure class="figure">
 <a href="#"><img src="https://picsum.photos/id/437/200/200" class="figure-img img-fluid rounded" alt=""></a> 
 <figcaption class="figure-caption">CLUB 7</figcaption>
 </figure>
 </span>
  <span class="border">
 <figure class="figure">
 <a href="#"><img src="https://picsum.photos/id/437/200/200" class="figure-img img-fluid rounded" alt=""></a> 
 <figcaption class="figure-caption">CLUB 8</figcaption>
 </figure>
 </span>
</div>



<div id="add"></div>