隐藏包含特定文本的 div

Question

我想根据里面的文字隐藏一个div。在下面的示例中，我想隐藏带有“Handtekening”的那些和带有“Thuis”的那些。我更喜欢用 CSS 来做到这一点。那可能吗？

divs 的类名必须相同……

 <div class="test">
     Pakket
</div>
<div class="test">
     Handtekening
</div>
<div class="test">
     Thuis
</div>

如果用 CSS 做不到，那么用 JavaScript 怎么能做到呢？

原文由 Jilco Tigchelaar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个简单的普通 Javascript 解决方案：

 const divs = document.getElementsByClassName('test');

for (let x = 0; x < divs.length; x++) {
    const div = divs[x];
    const content = div.textContent.trim();

    if (content == 'Handtekening' || content == 'Thuis') {
        div.style.display = 'none';
    }
}

在这里工作 JSFiddle

请记住将脚本包含在 HTML 页面的末尾（就在 </body> 标记之前）。

原文由 o01 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您可以控制 HTML 输出并且文本文档变大两倍没有问题，您可以复制每个 div 的内容。否则 JavaScript 是必经之路。这是 CSS 解决方案：

 <div class="test" content="Pakket">
Pakket
</div>
<div class="test" content="Handtekening">
Handtekening
</div>
<div class="test" content="Thuis">
Thuis
</div>

然后将选择器用于包含字符串的属性：

 div[content~=Thuis] { display:none; }

当“Thuis”作为一个单独的词包含在文本中时，上面的那个将匹配。如果你想匹配字符串的任何出现，你应该使用：

 div[content*=and] { display:none; }

原文由 DreamWave 发布，翻译遵循 CC BY-SA 3.0 许可协议