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

希望您对此有帮助。

将CSS类添加到列表内的对象

2 个答案: