addClass to multiple distinct elements with jquery

Question

I have some code that generates markup similar to this:

<div id="container">
  <div data-number="123">Fred</div>
  <div data-number="128">Wilma</div>
  <div data-number="129">Barney</div>
  <div data-number="123">Fred</div>
  <div data-number="123">Fred</div>
  <div data-number="129">Barney</div>
  <div data-number="111">Dino</div>
  <div data-number="008">Betty</div>
  <div data-number="123">Fred</div>
  <div data-number="123">Fred</div>
</div>

The container will have many duplicates.

The data tags are generated dynamically based on potentially thousands of data-ids. But, a particular view will likely not have more than a dozen or so unique items, so iterating over them shouldn't be a big deal.

What I want to do is add css classes to similar items in a predictable way.

  <div class="unique-item-1" data-number="123">Fred</div>
  <div class="unique-item-2" data-number="008">Betty</div>
  <div class="unique-item-3" data-number="128">Wilma</div>
  <div class="unique-item-4" data-number="129">Barney</div>
  <div class="unique-item-5" data-number="111">Dino</div>
  <div class="unique-item-1" data-number="123">Fred</div>
  <div class="unique-item-1" data-number="123">Fred</div>

You'll notice that all the Fred divs (data-number 123) get the same class (unique-item-1) added.

The goal is to have CSS that will add colors or whatever, like so:

.unique-item-1 {color:red;}
.unique-item-2 {color:pink;}
.unique-item-3 {color:green;}
.unique-item-4 {color:black;}
.unique-item-5 {color:wheat;}

I've tried using jquery's "unique"... but I guess I don't know what unique means :)

jsfiddle.net/arunpjohny/2826S/2

Arun P Johny
– Arun P Johny

2014-07-30 05:16:14 +00:00
Commented Jul 30, 2014 at 5:16 — Arun P Johny
– Arun P Johny, Commented Jul 30, 2014 at 5:16
@ArunPJohny Well i'm impressed with your methodology..

Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy

2014-07-30 05:25:58 +00:00
Commented Jul 30, 2014 at 5:25 — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Jul 30, 2014 at 5:25

Balachandran · Accepted Answer · 2014-07-30 05:34:14Z

1

Use data() attribute in jquery ,

      var getArray = [];

  $("#container").children("[data-number]").filter(function () {

      var index = $.inArray($(this).data("number"), getArray);

      if (index == -1) {
          getArray.push($(this).data("number"));
          $(this).addClass("unique-item-" + getArray.length);
      } else {
          $(this).addClass("unique-item-" + parseInt(index+1));
      }
  });

UPDATED DEMO

edited Jul 30, 2014 at 5:34

answered Jul 30, 2014 at 5:22

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

addClass to multiple distinct elements with jquery

1 Answer 1

UPDATED DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related