Question

我有一些代码可以生成与此类似的标记：

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

容器会有很多重复。

数据标记是根据潜在的数千数据ID动态生成的。但是，一个特定的视图可能不会有超过十几个独特的项目，所以迭代它们不应该是一个大问题。

我想要做的是以类似的项目以可预测的方式添加css类。

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

您会注意到所有Fred div（数据编号123）都添加了相同的类（unique-item-1）。

目标是拥有可以添加颜色或其他内容的CSS，如下所示：

.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;}

我尝试过使用jquery的“独特”......但我想我不知道它的独特含义：）

Answer 1

在jquery中使用data（）属性，

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

使用jquery将addClass添加到多个不同的元素

1 个答案:

UPDATED DEMO