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

Question

有没有办法使用 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，因此使用函数可能会起作用。

Answer 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;
    }
  }

}