隐藏所有具有数值范围的 CSS 类

Posted 2023-03-06

【中文标题】隐藏所有具有数值范围的 CSS 类

【英文标题】：Hide all CSS classes with numeric value range

【发布时间】：2016-04-05 02:02:59

【问题描述】：

有没有办法使用 CSS 来定位任何具有数字范围的类名的 DOM 元素？我有多个具有相同类名的 DOM 元素，我想隐藏除第一个实例之外的所有元素。

例如

<div class="id-1"></div>
<div class="id-1"></div>
<div class="id-100"></div>
<div class="id-100"></div>
<div class="id-100"></div>
<div class="id-1000"></div>
<div class="id-1000"></div>
<div class="id-1000"></div>

然后只显示每个唯一类名的第一个实例。

例如

<div class="id-1 hidden"></div>
<div class="id-1 hidden"></div>
<div class="id-100"></div>
<div class="id-100 hidden"></div>
<div class="id-100 hidden"></div>
<div class="id-1000"></div>
<div class="id-1000 hidden"></div>
<div class="id-1000 hidden"></div>

需要注意的是，我事先不知道类名是什么，因此我无法在我的 CSS 文件中手动键入它们。

我正在使用 LESS CSS，因此使用函数可能会起作用。

【问题讨论】：

这些数值是完全随机的，还是它们实际上都以 1 开头？数值作为一个组还有什么独特之处吗？

是的，范围可以是 1 到 300,000。它基于具有大量行的 mysql 表中的 Id 字段。

div[class^="id-"] 将针对类属性值以id- 开头的所有元素，以防这仅适用于数字。

太棒了。谢谢迈克尔。那么我将如何显示每个唯一类的第一个实例？ div[class^="id="]:first-child ?

@Michael_B: ***.com/questions/25110777/… ***.com/questions/27664025/…

【参考方案1】：

您需要一个前缀来选择和过滤所有类。在这个问题中，我添加的前缀是'id-'。

添加css

.hidden
  display: none;

添加js

var container = document.getElementsByTagName('div');
var prefix = 'id-';
var kw = '';
for(var i = 0; i < container.length; i++)
  var currentClass = container[i].classList[0];
  if(currentClass.indexOf(prefix) > -1)
    if(kw === currentClass)
        console.log(currentClass);
        container[i].className = currentClass+" hidden";
     else
      kw = currentClass;
    
  

【讨论】：

请阅读问题的倒数第二段。

是的，但如前所述，我不知道类名是什么，因为它们是通过 php 生成的

我已经编辑了我的帖子。请检查一下。只有当你确定类名的前缀时它才有效