eine Klasse zum ersten Element in Array hinzufügen

Question

Ich habe eine einfache Frage zu jQuery Array-Elemente ...

<div id="holder">  
    <div class="A">A</div> 
    <div class="A">A</div> 
    <div class="A">A</div> 
    <div class="B">B</div> 
    <div class="B">B</div> 
    <div class="B">B</div> 
    <div class="B">B</div> 
    <div class="C">C</div> 
    <div class="C">C</div> 
    <div class="C">C</div> 
    <div class="C">C</div> 
    <div class="C">C</div> 
</div> 

und JS:

var klassenarray = $("#holder").find("[class]").map(function() { 
    return this.className; 
    }).get(); 
alert(klassenarray); 

Gibt mir:

A,A,A,B,B,B,B,C,C,C,C,C 

Nun muss ich eine Klasse namens first zu jedem Element mit dem gleichen Klassennamen hinzufügen. Wie folgt aus:

<div id="holder">  
    <div class="A first">A</div> 
    <div class="A">A</div> 
    <div class="A">A</div> 
    <div class="B first">B</div> 
    <div class="B">B</div> 
    <div class="B">B</div> 
    <div class="B">B</div> 
    <div class="C first">C</div> 
    <div class="C">C</div> 
    <div class="C">C</div> 
    <div class="C">C</div> 
    <div class="C">C</div> 
</div> 

Answer 1

Um dies zu erreichen können Sie Ihr Array nehmen, um die einzigartigen Werte bekommen, dann Schleife durch und verwenden Sie die first() Methode nur die ersten Elemente mit dem angegebenen Klasse abzurufen. Versuchen Sie folgendes:

var klassenarray = $("#holder").find("[class]").map(function() { 
 
    return this.className; 
 
}).get(); 
 

 
$.unique(klassenarray).forEach(function(c) { 
 
    $('.' + c).first().addClass('first'); 
 
});

.first { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="holder"> 
 
    <div class="A">A</div> 
 
    <div class="A">A</div> 
 
    <div class="A">A</div> 
 
    <div class="B">B</div> 
 
    <div class="B">B</div> 
 
    <div class="B">B</div> 
 
    <div class="B">B</div> 
 
    <div class="C">C</div> 
 
    <div class="C">C</div> 
 
    <div class="C">C</div> 
 
    <div class="C">C</div> 
 
    <div class="C">C</div> 
 
</div>

Answer 2

Eine Möglichkeit, dies zu tun:

$(".A:first").addClass('first') 
$(".B:first").addClass('first') 
$(".C:first").addClass('first') 

Working fiddle

Answer 3

  var previousClazz=""; 
      $("#holder > div").each(function(index,item){ 

       if(previousClazz==$(item).attr("class")){ 

       }else{ 
        previousClazz=$(item).attr("class"); 
        $(item).attr("class",$(item).attr("class")+" first") 
       }; 
      });