Цикл по элементам

Question

У меня есть 3 div (col-md-4), и внутри них есть блоки div.Я пытаюсь получить элементы по строкам (как если бы родитель был одним col-md-12, а не их разделенными col-md-4), но я не мог понять, как этого добиться.

проясните проблему (и упростите ее), ниже я добавил атрибут 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>