时间戳

首页 > 解决方案 > 如何选择具有包含特定文本的属性的元素？

javascript - 如何选择具有包含特定文本的属性的元素？

问题描述

我有这个 HTML 代码：

<li class="_33c randomtext3" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;pub_comment&quot;,&quot;from_uids&quot;}">
<li class="_33c randomtext5" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;year_comment&quot;,&quot;from_uids&quot;}">
<li class="_33c randomtext4" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;group_comment&quot;,&quot;from_uids&quot;}">
<li class="_33c randomtext7" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;pub_comment&quot;,&quot;from_uids&quot;}">
<li class="_33c randomtext5" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;pub_comment&quot;,&quot;from_uids&quot;}">

行的顺序是多种多样的，（使用 [2] 不起作用）

我想删除<li> 带有特定文本（data-gt="...group_comment..."）的，"group_comment"是特定文本（第 3 行，有时它在另一行）。

我尝试使用document.querySelectorAll('[data-gt]');a NodeList(5)，但如何在其中找到NodeList特定文本？

谢谢你。

标签： javascript

解决方案

使用属性值选择器和通配符选择器。

document.querySelectorAll('li[data-gt*=group_comment]')

见https://www.geeksforgeeks.org/wildcard-selectors-and-in-css-for-classes/

const matches = document.querySelectorAll('[data-gt*="group_comment"]')
matches.forEach( x => x.classList.add("hidden") )
.hidden {
  display: none;
}
<ul>
  <li class="_33c randomtext3" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;pub_comment&quot;,&quot;from_uids&quot;}"> pub_comment </li>
  <li class="_33c randomtext5" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;year_comment&quot;,&quot;from_uids&quot;}"> year_comment </li>
  <li class="_33c randomtext4" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;group_comment&quot;,&quot;from_uids&quot;}"> group_comment </li>
  <li class="_33c randomtext7" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;pub_comment&quot;,&quot;from_uids&quot;}">pub_comment</li>
  <li class="_33c randomtext5" data-gt="{&quot;alert_id&quot;:1576605904117859,&quot;notif_type&quot;:&quot;pub_comment&quot;,&quot;from_uids&quot;}">pub_comment</li>
</ul>

推荐阅读