Question

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

e.g。

<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>

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

e.g。

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

}

隐藏所有具有数值范围

1 个答案: