Добавить класс каждые 5 элементов (div), когда я нажимаю кнопку

Question

Мне нужно добавить класс каждые 5 элементов (div), когда я нажимаю кнопку Кто-нибудь знает, как добавить класс каждые 5 элементов, используя каждый jQuery?

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

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

Answer 1

Используйте $.slice, чтобы получить ряд элементов. Вы можете посмотреть документацию здесь: http://api.jquery.com/slice/

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

Answer 2

Я не совсем ясно, по этому вопросу, но при условии, два варианта ответа на то, что я думаю, что вы просите:

$(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 3

Вы можете используйте первый параметр (indexInArray) jQuery .each, чтобы получить индекс массива.

Затем вы можете использовать Remainder (%), чтобы добавить класс для каждого пятого элемента.

Может быть, этот пример может вам начать:

$(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; 
 
    }); 
 
});

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

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

Answer 4

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

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

Возврат ложное значение будет выходить из каждой функции.

Передайте индекс каждой функции и возвратите ix < 4, поскольку индекс основан на 0.