将css类添加到列表中的对象[重复]答案

【问题标题】：add a css class to an object inside a list [duplicate]将css类添加到列表中的对象[重复]
【发布时间】：2018-06-26 17:51:39
【问题描述】：

我想知道如何将类添加到列表中的特定对象？

让我用一些代码来演示这个问题。

$('.box')[5].addClass('center')

.center{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
        <div class="box">
            c-1
        </div>
        <div class="box">
            c-2
        </div>
        <div class="box">
            c-3
        </div>
        <div class="box">
            c-4
        </div>
        <div class="box">
            c-5
        </div>
        <div class="box">
            c-6
        </div>
        <div class="box">
            c-7
        </div>
        <div class="box">
            c-8
        </div>
        <div class="box">
            c-9
        </div>
    </div>

这不起作用，因为我收到一个错误： Uncaught TypeError: $(...)[5].addClass is not a function

我只想将类添加到列表的第五个元素。我能做些什么？

【问题讨论】：

要定位所选元素的 DOM，您必须连接 $($('.box')[5]).addClass('center') jsfiddle.net/fjz56wgg/6

标签： javascript html

【解决方案1】：

$('.box') 是一个对象而不是一个数组。所以你不能这样使用index。

您可以简单地使用eq() 选择器来选择匹配集中指定索引处的元素：

$('.box:eq(5)').addClass('center');

.center{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box">
      c-1
  </div>
  <div class="box">
      c-2
  </div>
  <div class="box">
      c-3
  </div>
  <div class="box">
      c-4
  </div>
  <div class="box">
      c-5
  </div>
  <div class="box">
      c-6
  </div>
  <div class="box">
      c-7
  </div>
  <div class="box">
      c-8
  </div>
  <div class="box">
      c-9
  </div>
</div>

【讨论】：

为什么是each 循环？为什么不按索引选择单个元素？

【解决方案2】：

在 JQuery 中有一个叫做eq selector的东西

在匹配集中选择索引 n 处的元素。

这是在您的实例中使用它的方法（记住从 0 开始计数）

$('.box:eq( 5 )').addClass('center')

.center {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box">
    c-1
  </div>
  <div class="box">
    c-2
  </div>
  <div class="box">
    c-3
  </div>
  <div class="box">
    c-4
  </div>
  <div class="box">
    c-5
  </div>
  <div class="box">
    c-6
  </div>
  <div class="box">
    c-7
  </div>
  <div class="box">
    c-8
  </div>
  <div class="box">
    c-9
  </div>
</div>

希望对您有所帮助。

【讨论】：