如何使用JavaScript过滤器过滤元素？

我正在努力让这个过滤器正常工作

我将其设置为根据卡片标题过滤并仅显示搜索的内容（h5）。它会过滤掉不需要的标题，但不会过滤掉卡片的其余部分

为了更好地解释，这里有一个演示-

代码如下：

函数myFunction（）{
var输入，过滤器，卡，h5，a，i；
输入=document.getElementById（“myFilter”）；
filter=input.value.toUpperCase（）；
卡片=document.getElementById（“myItems”）；
h5=card.getElementsByTagName（“h5”）；
对于（i=0；i-1）{
h5[i].style.display=“”；
}否则{
h5[i].style.display=“无”；
}
}
}

.container{
填充：10px；
}
ulli{
列表样式：无；
}

卡片字幕
一些文本
卡片字幕
一些文本
卡片字幕
一些文本

原因 您只隐藏标题（

h5.card title

），而不是整个卡片（

div.card

）

解决方案 首先获取整个卡片的引用。然后隐藏该元素，而不仅仅是标题

实施A

获取对整个卡的引用的一个快速而肮脏的解决方案是通过

parentElement

属性访问它。由于您的

的父级是

卡体

，它的父级是整个卡，因此您可以通过

h5[i].parentElement.parentElement

访问它

因此，将

h5[i].style.display更改为
h5[i].parentElement.parentElement.style.display
像这样：


函数myFunction（）{
var输入，过滤器，卡，h5，a，i；
输入=document.getElementById（“myFilter”）；
filter=input.value.toUpperCase（）；
卡片=document.getElementById（“myItems”）；
h5=card.getElementsByTagName（“h5”）；
对于（i=0；i-1）{
h5[i].parentElement.parentElement.style.display=“”；
}否则{
h5[i].parentElement.parentElement.style.display=“无”；
}
}
}
.container{
填充：10px；
}
ulli{
列表样式：无；
}

卡片字幕
一些文本
卡片字幕
一些文本
卡片字幕
一些文本
您必须隐藏整个卡片容器，而不是仅隐藏标题（h5）。
例如，可以在标题上使用
parentNode
进行快速更正

if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
    h5[i].parentNode.style.display = "";
} else {
    h5[i].parentNode.style.display = "none";
}

你在隐藏标题。你想隐藏的是这张卡

您可以通过执行h5[i].parentNode.parentNode来执行此操作，因为标题嵌套在卡片的两层深处

如果您的客户端浏览器支持它，您可以使用

或者，如果您可以使用jQuery，您可以搜索
$（h5[i]）。最近的（'.card'）


函数myFunction（）{
var输入，过滤器，卡，h5，a，i；
输入=document.getElementById（“myFilter”）；
filter=input.value.toUpperCase（）；
卡片=document.getElementById（“myItems”）；
h5=card.getElementsByTagName（“h5”）；
对于（i=0；i-1）{
current.parentNode.parentNode.style.display=“”；
}否则{
current.parentNode.parentNode.style.display=“无”；
}
}
}
.container{
填充：10px；
}
ulli{
列表样式：无；
}

卡片字幕
一些文本
卡片字幕
一些文本
卡片字幕
一些文本
这里的问题是，您只设置了
显示：无
，反之亦然，设置为
h5
，而不是整个卡本身

看这里


函数myFunction（）{
var输入，过滤器，卡，h5，a，i；
输入=document.getElementById（“myFilter”）；
filter=input.value.toUpperCase（）；
卡片=document.getElementById（“myItems”）；
h5=card.getElementsByTagName（“h5”）；
对于（i=0；i-1）{
h5[i]。最近的（“.card”）。style.display=“”；
}否则{
h5[i]。最近的（“.card”）.style.display=“无”；
}
}
}
您仅隐藏锚定标记。你需要把整个卡块都藏起来，我知道我失火的地方了。谢谢你的帮助。