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>

由于调整代码段的大小并不容易，因此这里是CodePen。

Answer 2

让我在这里画些图，您可能会想到编写代码的线索。使用$('#container').highcharts({ // ... exporting: { enabled: true, allowHTML: true, chartOptions: { // ... } } });检查浏览器宽度的断点，每行1个，每行2个或每行3个。然后将您的slice语句置于每种情况下。

下面是每行3个示例，请享受：）

screen.width

请记住，我的行以0开头

jsfiddle

jQuery选择浮动子项的每个“行”

2 个答案: