Question

当我点击按钮时，我需要每5个项目（div）添加一个类有没有人知道如何使用每个jQuery每5个元素添加一个类？

var i = 0;
$(document).ready(function() {
        $('a[href=#]').click(function() {

           $('.element-item').each(function(i+5) {
        });
     });

Answer 1

使用$.slice获取一系列元素。您可以在此处查看文档：{{3}}

$('.element-item').slice(0,5).addClass('class_name');

Answer 2

http://jsfiddle.net/SeanWessell/8yuqb5u3/

$('a').click(function() {
  $('.element-item:not(.newClass)').each(function(ix) {
    $(this).addClass('newClass')
    return (ix < 4)
  })
})

返回false值将退出每个函数。

将索引传递给每个函数并返回ix＆lt; 4因为索引是基于0的。

Answer 3

我对这个问题并不完全清楚，但为我认为你所要求的提供了两个可能的答案：

$(function() {
    $('a[href="#"]').on('click', function() {
        // Every 5th element
        $('.element-item:nth-child(5n)').addClass('sample');

        // First 5 elements
        $('.element-item:lt(5)').addClass('sample');
    });
});

Answer 4

您可以使用jQuery .each的第一个参数（indexInArray）来获取数组的索引。

然后您可以使用Remainder (%)为每五个项目添加课程。

也许这个例子可以让你开始：

＆＃13;

$(document).ready(function() {
  $('a[href=#]').click(function() {
    $('.element-item').each(function( index, value ) {
      var itemNumber = index + 1;
      if (itemNumber % 5 === 0) {
        $(value).addClass('newClass');
      }
    });
    return false;
  });
});

＆＃13;

.newClass {
    border: 1px solid #000;
}
.element-item {
    padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">link</a>

<div class="element-item">element 1</div>
<div class="element-item">element 2</div>
<div class="element-item">element 3</div>
<div class="element-item">element 4</div>
<div class="element-item">element 5</div>
<div class="element-item">element 6</div>
<div class="element-item">element 7</div>
<div class="element-item">element 8</div>
<div class="element-item">element 9</div>
<div class="element-item">element 10</div>
<div class="element-item">element 11</div>

＆＃13;

当我点击按钮时，每5个项目（div）添加一个类

4 个答案: