Дочерные элементы в div
 

Есть список

<div class="top_block_portf">
   <div class="ih-item"></div>
   <div class="ih-item"></div>
   <div class="ih-item"></div>
   <div class="ih-item"></div>
</div>

который я обворачиваю в div с класом new1 если .ih-item больше n. получаю такой код -

<div class="top_block_portf">
   <div class="new1">
     <div class="ih-item"></div>
     <div class="ih-item"></div>
   </div>
   <div class="new1">
     <div class="ih-item"></div>
     <div class="ih-item"></div>
   </div>
</div>

а потом для .ih-item в блоке .new1 добавляю класс - first, second, next

var quality = 27;

function portfolioBlock() {
  var divs = $(".ih-item");
  for(var i = 0; i < divs.length; i+=quality) {
    divs.slice(i, i+quality).wrapAll("<div class='new1'></div>");
  }
  var newBl = $(".new1");
  var new1 = new Array;
  newBl.each( function( index) {
    blockPort();
  });
  console.log(newBl);
};

function blockPort() {
  var arrDiv = new Array;
  var arrDiv = $('.new1').find('.ih-item');
    arrDiv[0].classList.add("first");
    arrDiv[14].classList.add("second");
    arrDiv[26].classList.add("next");
  console.log(arrDiv);
 }

На практике выходит что только в первом блоке я добавляю класс - first, second, next, а для второго .new1 не добавляет
Заметил что при выборе .ih-item в массив попадает все блоки как с первого так и со второго .new1


Как написать чтоб для каждого .new1 работало.

klifort,

var quality = 27;

function portfolioBlock() {
  var divs = $(".ih-item");
  for(var i = 0; i < divs.length; i+=quality) {
    divs.slice(i, i+quality).wrapAll("<div class='new1'></div>");
  }
  var newBl = $(".new1");
  var new1 = new Array;
  newBl.each( function( index, el) {
    blockPort(el);
  });
  console.log(newBl);
};

function blockPort(el) {
  var arrDiv = $('.ih-item', el);
    arrDiv[0].classList.add("first");
    arrDiv[14].classList.add("second");
    arrDiv[26].classList.add("next");
  console.log(arrDiv);
 }