jquery - 将类添加到数组中的第一个元素

Question

我有一个关于 jQuery 数组元素的简单问题...

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

和 JS:

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

给我:

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

现在我需要向具有相同 className 的每个元素添加一个名为 first 的类。像这样:

<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

要实现此目的，您可以获取数组，获取唯一值，然后循环遍历它并使用 first() 方法仅检索具有给定类的第一个元素。试试这个:

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>