时间戳

首页 > 解决方案 > JavaScript，HTML 搜索引擎 - 如何获取元素的父级？

javascript - JavaScript，HTML 搜索引擎 - 如何获取元素的父级？

问题描述

我的问题是：

搜索脚本正在运行，但它只隐藏了代码中的 h3 元素。

<h3 class="post-subtitle" style="display: flex;">Protokoły tunelowania VPN</h3>
<h3 class="post-subtitle" style="display: flex;">Certyfikat cyfrowy</h3>

我需要代码来隐藏带有“post”ID的整个div，而不仅仅是h3元素。

我怎么做？

搜索栏的 HTML 代码：

<div id="kontener" class="container">
    <div style="text-align:center" id="search-bar">
      <input type="text" id="searchbar" onkeyup="searchBar()" class="shadow-lg">
    </div>
</div>

网站上的 HTML 代码

<!-- First element -->

<div id="post">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="URL">
<h2 class="post-title"><i class="far fa-sticky-note fa-xs" aria-hidden="true"></i> ASO</h2>
<h3 class="post-subtitle" style="display: flex;">Protokoły tunelowania VPN</h3>
</a>
<p class="post-meta">11 Maj, 2021</p>
</div>
</div>
</div>
<hr>
</div>

<!-- End of First element -->

<!-- Second element -->

<div id="post">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="URL">
<h2 class="post-title"><i class="far fa-sticky-note fa-xs" aria-hidden="true"></i> ELSK</h2>
<h3 class="post-subtitle" style="display: flex;">Certyfikat cyfrowy</h3>
</a>
<p class="post-meta">26 Kwiecień, 2021</p>
</div>
</div>
</div>
<hr>
</div>

<!-- End of Second element -->

JavaScript 代码：

<script>
function searchBar() {
    let input = document.getElementById('searchbar').value
    input=input.toLowerCase();
    let x = document.getElementsByClassName('post-subtitle');
      
    for (i = 0; i < x.length; i++) { 
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display="none";
        }
        else {
            x[i].style.display="flex";                 
        }
    }
}
</script>

标签： javascripthtmljqueryfunctionsearchbar

解决方案

您只需要通过 .parentElement / .parentNode 或使用 .closest 函数来定位几个父节点。

例子：

<script>
function searchBar() {
    let input = document.getElementById('searchbar').value
    input=input.toLowerCase();
    let x = document.getElementsByClassName('post-subtitle');
      
    for (i = 0; i < x.length; i++) { 
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].closest('#post').style.display="none";
            // Or this below (note each parentElement targets parent tag)
            // x[i].parentElement.parentElement.parentElement.parentElement.parentElement.style.display="none";
        }
        else {
            x[i].closest('#post').style.display="flex";                 
        }
    }
}
</script>

推荐阅读