Как получить двумерный массив из div?

Question

[Nayob]

Есть такой набор div, из содержимого которых необходимо собрать двумерный массив:

<div class="bigDiv">
    <div class="smallDiv">1</div>
    <div class="smallDiv">2</div>
    <div class="smallDiv">3</div>
</div>
<div class="bigDiv">
    <div class="smallDiv">1</div>
    <div class="smallDiv">2</div>
    <div class="smallDiv">3</div>
</div>

Вот как я это пытаюсь сделать:

$('.bigDiv').each(function(){
    var $line = $(this).map(function(id, elem){
        return elem.innerHTML;
    }).get();
    arr.push($line);
});

В итоге в Arr у меня содержится следующее:

[[<div class="smallDiv">1</div><div class="smallDiv">2</div><div class="smallDiv">3</div>],
[<div class="smallDiv">1</div><div class="smallDiv">2</div><div class="smallDiv">3</div>]]

Но такое впечатление я не очень понимаю с каким содержимым я работаю. Может кто-то помочь направить в нужном направлении?

Answer 1

[0xD34F]

const data = Array.from(
  document.querySelectorAll('.bigDiv'),
  n => Array.from(n.querySelectorAll('.smallDiv'), m => m.innerText)
);

или

const data = [];

for (const n of document.getElementsByClassName('bigDiv')) {
  data.push([]);

  for (const m of n.children) {
    data[data.length - 1].push(m.innerHTML);
  }
}

или

const data = Array.prototype.reduce.call(
  document.getElementsByClassName('smallDiv'),
  (acc, n) => (
    n.previousElementSibling || acc.push([]),
    acc[~-acc.length].push(n.textContent),
    acc
  ),
  []
);