Скрыть все классы 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; 
    } 
    } 

}