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

252

21 сентября 2017, 17:58

Есть список

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

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

var quality = n;
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();
  });
};
function blockPort() {
  var arrDiv = new Array;
  var arrDiv= $('.new1').find('.ih-item');
    arrDiv[0].classList.add("first");
 }

Answer 1

Дак всё логично - вы берете первый блок .new1 и в нём ищете .ih-item Чтобы найти все первые .ih-item в блоках .new1 используйте

$('.new1 .ih-item:first-child')

а затем уже с помощью .each() добавляйте им нужный вам класс. С другой стороны, если это нужно только для того чтоб какие-то стили применить - дак и используйте тогда селектор .new1 .ih-item:first-child

Answer 2

Решение, может кому пригодится -

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