Перебор элементов по 3 штуки?

Question

[viktorulyushev]

У меня есть какой то список,предположим

<div class="catalog-page-products">
   <div class="products-view-block">
      ....
   </div>
   <div class="products-view-block">
      ....
   </div>
   <div class="products-view-block">
      ....
   </div>
   <div class="products-view-block">
      ....
   </div>
   <div class="products-view-block">
      ....
   </div>
</div>

В строке по 3 элемента
Мне нужно как то перебрать этот набор элементов,так чтобы для 1 и 3 элемента в строке добавлялся класс first и last,и так для всех строк

Как через each обрабатывать по 3 элемента?Т.е,берем сначала первые 3 элемента,добавляем в нем классы,затем идем к следующим 3 элементам и т.д

Answer 1

[Андрей Сергеев]

/*
 *  Returns an array of jQuery objects, grouped by specified number of elements.
 *  
 *    Say you have 17 <frameset> tags on your page...
 *  
 *    $('frameset').inGroupsOf(7); // => [ jQuery[0..6], jQuery[7..13], jQuery[14..16] ]
 *
 */
$.fn.inGroupsOf = function( countPerGroup ) {
    
    var groups = [], offset = 0, $group;
    
    while ( ($group = this.slice( offset, (countPerGroup + offset) )).length ) {
        groups.push( $group );
        offset += countPerGroup;
    }
    
    return groups;
};

Comments

[viktorulyushev]

Чет сложна)

[Андрей Сергеев]

зато универсально)

var groups = $('.products-view-block').inGroupsOf(3);
$(groups).each(function() {
   var group = this;
   $(group[0]).addClass('first')
   $(group[group.length - 1]).addClass('last')
});

[viktorulyushev]

Андрей Сергеев, Спасибо,все работает

[Андрей Сергеев]

если нужно добавлять только классы, то вариант от AlexRas более правильный

[viktorulyushev]

Андрей Сергеев, Да,стилями сделал

Answer 2

[AlexRas]

Вот просто: https://jsfiddle.net/pfsfd9jp/

Можно и без js обойтись, если добавление классов не является обязательным, а нужно только стилизовать элементы: https://jsfiddle.net/pfsfd9jp/1/

Comments

[viktorulyushev]

Спасибо ,то что нужно,3n+1 не догадался сделать