CODEWITHSUNDEEP
jqueryarraysclass
Cycle99
Cycle99

Reputation: 182

add a class to first element in array

I have a simple question about jQuery array elements...

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

and the JS:

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

Gives me: 

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

Now I need to add a class called first to every element with the same className. Like that:

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

Upvotes: 1

Views: 2667

Answers (3)

hotusm
hotusm

Reputation: 1

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

Upvotes: 0

4b0
4b0

Reputation: 22323

One way to do this :

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

Working fiddle

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337626

To achieve this you can take your array, get the unique values, then loop through it and use the first() method to retrieve only the first elements with the given class. Try this:

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>

Upvotes: 3

Related Questions