循环通过分块元素

Question

我有3个div（ col-md-4 ），里面有div块。 我试图按行获取元素（好像父母是一个col-md-12而不是他们分开的col-md-4s），但我无法弄清楚如何实现它。

为了澄清问题（并简化它），下面我添加了data-order属性，以显示它的确切顺序以及我希望如何订购它们。

为了防止混淆，我更新了问题并添加了data-id属性; 想象你根本没有data-order属性; 我只是说它只是为了澄清顺序。

<div class="col-md-4 parent">
    <div class="child" data-id="3" data-order="1"></div>
    <div class="child" data-id="4" data-order="4"></div>
    <div class="child" data-id="8" data-order="7"></div>
</div>

<div class="col-md-4 parent">
    <div class="child" data-id="1" data-order="2"></div>
    <div class="child" data-id="2" data-order="5"></div>
</div>

<div class="col-md-4 parent">
    <div class="child" data-id="11" data-order="3"></div>
    <div class="child" data-id="7" data-order="6"></div>
</div>

如何使用for循环（或foreach）来获取元素以对这些元素进行排序？

$('.parent').each(function(index) {
     console.log($(this).data('order')); // Using this gives 1, 4, 7, 2, 5, 3, 6
});

// However what I want to achieve is: when looped:
// console.log($(this).data('id'));    // "3, 1, 11, 4, 2, 7, 8"

实现这一目标的最合适方式是什么？ 你会如何处理这种情况？

---

像这样：

 parent(1)-child(1)
 parent(2)-child(1)
 parent(3)-child(1)
 parent(X)-child(1)

 parent(1)-child(2)
 parent(2)-child(2)
 parent(3)-child(2)
 parent(X)-child(2)

 parent(1)-child(3)
 parent(2)-child(3)
 parent(3)-child(3) and so on...

Answer 1

使用循环遍历每个parent直到集合已满：

 const collection = []; const totalChildren = $('.child').length; for (let i = 0; collection.length < totalChildren; i++) { $('.parent').each((_, parent) => { if (parent.children[i]) collection.push(parent.children[i]); }); } console.log(collection); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-4 parent"> <div class="child" data-order="1"></div> <div class="child" data-order="4"></div> <div class="child" data-order="7"></div> </div> <div class="col-md-4 parent"> <div class="child" data-order="2"></div> <div class="child" data-order="5"></div> </div> <div class="col-md-4 parent"> <div class="child" data-order="3"></div> <div class="child" data-order="6"></div> </div>