jquery选择浮动孩子的每一“行”

Question

所以我有多个元素实际上在 flex 父级中，但看起来它们是浮动的，但它们同时居中（每行最多 3 个子级）但是当您调整父级的大小时，它们显然会创建新行。 这是我的代码：

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

或者在我创建 http://jsfiddle.net/6qdp3sxa/4/ 的 jsfiddle 中。

我需要在 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>

由于调整 sn-p 的大小并不容易，这里是 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