jquery выбрать каждую «строку» плавающих потомков

Question

Итак, у меня есть несколько элементов, которые на самом деле находятся в flex parent, но похоже, что они плавающие, но они центрированы одновременно (максимум 3 дочерних элемента в строке), но когда вы изменяете размер parent, они, очевидно, создают новую строку. Вот мой код:

<div class="parent">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
</div>

CSS:

.parent {
  width: 100%;
  background-color: rgba(0,0,0,0.2);
  max-width: 950px;
  overflow:auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.child {
  width: 300px;
  height: 200px;
  margin: 8.3px;
  background-color: white;
}

Или вот в jsfiddle, который я создал http://jsfiddle.net/6qdp3sxa/4/.

И мне нужно выбрать каждую строку в jquery. Например, когда в строке 3 ребенка, это может быть что-то вроде этого:

$('.parent .child').slice(0, 3).each(function() {});
$('.parent .child').slice(4, 7).each(function() {});

Но в какой-то петле. Я понятия не имею, как это сделать, вы можете мне помочь?

РЕДАКТИРОВАТЬ: Эти дети находятся там динамически, поэтому я не могу сделать эти кусочки самостоятельно, потому что кто-то может добавить их или удалить их.

Answer 1

Я думаю, у меня есть кое-что, чтобы точно знать, в каком "ряду" находится конкретный div.

Это хорошее начало для вас, если это не совсем то, что вы ищете.

Трюк достигается путем зацикливания div и сравнения их верхнего смещения.

console.clear();

var targets = $(".parent .child");

$(window).on("load resize",function(){
  // Get the first offset to start a comparison
  var divOffset = targets.first().offset().top;

  // Loop throught each .child to add a row is not the same offset.
  var rows = 0;
  var div_per_row = [];
  targets.each(function(){
    if($(this).offset().top != divOffset){
      divOffset = $(this).offset().top;
      rows++;
    }
    div_per_row[rows] = div_per_row[rows]+1 || 1;
  });

  // Now you have a exact div per row count in an array.
  console.log(div_per_row)

  // Making fun with it. You could do whatever from this point.
  var count = 0;
  for(i=0;i<div_per_row.length;i++){
    for(k=0;k<div_per_row[i];k++){

      var rowNum = i+1;
      targets.eq(count).text("I'm on row#"+rowNum);
      console.log(i);
      count++;
    }
  }
});

.parent {
  width: 100%;
  background-color: rgba(0,0,0,0.2);
  max-width: 950px;
  overflow:auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.child {
  width: 300px;
  height: 200px;
  margin: 8.3px;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Поскольку изменить размер фрагмента нелегко, вот код CodePen .

Answer 2

Позвольте мне поставить здесь некоторый сюжет, у вас может быть ключ к написанию кода. Используйте screen.width, чтобы проверить точки разрыва ширины браузера: 1 на строку, 2 на строку или 3 на строку. Затем поместите свой оператор среза под каждое условие.

ниже приведен пример для 3 в ряду, наслаждайтесь:)

const count=3;
const selectRow=row=>$('.parent .child').slice(row*count, row*count+count);
const row=Math.ceil($('.parent .child').length/count);


for(let i=0;i<row;i++) selectRow(i).html(i);

for(let i=0;i<row;i++) selectRow(i).each((i,v)=>{//i is the index for each div in the row })

Просто помните, что мой ряд начинается с 0

jsfiddle