Wählen Sie jedes erste eindeutige Element durch Gruppierung

Question

Ich habe eine Liste von Elementen, die wechselnde Klassen haben. Die Vorkommen der Klassen sind zufällig und können ein- oder mehrmals hintereinander auftreten.

Ich suche einen Weg, um jedes erste Vorkommen eines Elements (markiert mit einem -) auszuwählen. Am liebsten würde ich das in CSS machen, aber ich kann auch mit einer JavaScript-Lösung arbeiten.

<div class="type-1"></div> - 
<div class="type-1"></div> 
<div class="type-1"></div> 
<div class="type-2"></div> - 
<div class="type-1"></div> - 
<div class="type-1"></div> 
<div class="type-2"></div> - 
<div class="type-2"></div> 
<div class="type-1"></div> - 
... 

Answer 1

Genau wie folgt aus: https://jsfiddle.net/aq8nw21f/

Dieser Code verwendet die CSS-Selektor benachbarten Geschwister, sowie: first-of-Typ den Rand Fall des ersten Eintrag in der Liste zu bekommen.

#container > div:first-of-type, .type-1 + .type-2, .type-2 + .type-1 { 
 
    color: red; 
 
}

<div id="container"> 
 
    <span>If you used :first-child, the div below this would not highlight.</span> 
 
    <div class="type-1">Yes</div> 
 
    <div class="type-1">No</div> 
 
    <div class="type-1">No</div> 
 
    <div class="type-2">Yes</div> 
 
    <div class="type-1">Yes</div> 
 
    <div class="type-1">No</div> 
 
    <div class="type-2">Yes</div> 
 
    <div class="type-2">No</div> 
 
    <div class="type-1">Yes</div> 
 
</div>

Answer 2

und eine weniger spektakuläre JS Lösung als die CSS einen von TW80000:

var els = Array.from(document.querySelectorAll('div[class^="type-"]')); 
 

 
console.log(els.filter(function(el, index) { 
 
    return index === 0 || !el.classList.contains(els[index - 1].classList.item(0)); 
 
}));

<div class="type-1">1</div> 
 
<div class="type-1">2</div> 
 
<div class="type-1">3</div> 
 
<div class="type-2">4</div> 
 
<div class="type-1">5</div> 
 
<div class="type-1">6</div> 
 
<div class="type-2">7</div> 
 
<div class="type-2">8</div> 
 
<div class="type-1">9</div>