如果数据包含特定的文本,则隐藏元素? [复制]
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中的特定字符串,则标记