向数组中的第一个元素添加一个类答案

【问题标题】：add a class to first element in array向数组中的第一个元素添加一个类
【发布时间】：2016-11-10 08:38:18
【问题描述】：

我有一个关于 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

现在我需要为每个具有相同类名的元素添加一个名为 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>

【问题讨论】：

你有没有尝试过什么？
我不知道如何“捕捉”数组中类名的第一个元素...

标签： jquery arrays class

【解决方案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>

【讨论】：

【解决方案2】：

一种方法：

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

Working fiddle

【讨论】：

您似乎错过了问题中的逻辑要点，即。类名不固定。

【解决方案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")
                };
            });

【讨论】：

欢迎来到 Stack Overflow！虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！