如果数据包含特定的文本,则隐藏元素? [复制]

Posted

技术标签:

【中文标题】如果数据包含特定的文本,则隐藏元素? [复制]【英文标题】:Hide element if data contains specific piece of text? [duplicate] 【发布时间】:2021-03-13 03:29:55 【问题描述】:

如果数据包含一段文本,是否有可能隐藏元素?

例如:隐藏数据包含“-en”的div

<div class="check" data-value="example-en"></div>
<div class="check" data-value="check-en"></div>
<div class="check" data-value="example2-en"></div>
<div class="check" data-value="check-fr"></div>

谢谢!

【问题讨论】:

在这种情况下可以使用 :contains 选择器来隐藏 div ! 我读到有人说在数据中你不能不使用:contains,你能举个例子吗?谢谢! 【参考方案1】:

您可以使用 css 或 javascript 来做到这一点。

CSS

[data-value*="-en"] 
  display: none;

如果你想基于类来做。

[class*="-en"] 
  display: none;

JS

document.querySelectorAll('[data-value*="-en"]').forEach((elem) => elem.style.display = 'none');

【讨论】:

是的,CSS 工作了 :) 非常感谢!还有一个问题, :not() 是否可以处理这个问题? :not([data-value....) 可以工作吗? 使用:not() 可能有效,但您的选择器列表最终可能会很大,具体取决于您要排除的数量。 谢谢@aphextwix 最后一个问题(srry 大声笑),是否可以对课程做同样的事情?隐藏包含 -en 的类?例如: 隐藏那些它的类包含-en?谢谢老兄 @Vander - 我已经更新了我的答案以展示使用类的示例。【参考方案2】:

您可以使用attribute selector

div[data-value*="-en"] 
  display: none;
<div class="check" data-value="check-en">1</div>
<div class="check" data-value="check-en">2</div>
<div class="check" data-value="check-fr">3</div>
<div class="check" data-value="check-fr">4</div>

【讨论】:

您好,杰拉德,感谢您的回复。问题是并非所有数据都是“检查”,还有其他名称和“-en”到最后......这可能是一个全球解决方案吗?谢谢

以上是关于如果数据包含特定的文本,则隐藏元素? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

Pandas:如果特定列不包含特定文本,则删除数据框中的行

仅CSS:如果特定元素不适合容器,则将其隐藏

如果组中的最后一个元素包含Pandas中的特定字符串,则标记

使用jQuery查找页面上元素ID包含特定文本的所有元素

EXCEL 如图A列中的文本数据,如果包含B列的任一数值,则显示红字。

当元素包含多个类名时如何在硒中复制标签?