javascript - 遍历分块元素

Question

我有 3 个 div (col-md-4)，它们里面有 div block 。我试图按行获取元素(就好像父级是一个 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>