将css类添加到列表中的对象

Question

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

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

​

$('.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

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

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

​

Answer 2

在JQuery中有一种叫做eq选择器的东西

在匹配的集合中选择索引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>

​

我希望你觉得这有帮助。