Повторите через классы внутри класса внутри div jquery

Question

Предположим, у меня есть следующая структура:

<div id="table">
  <div class="row">  
     <div class="cell">a</div>
     <div class="cell">b</div>
  </div>
  <div class="row">
     <div class="cell">d</div>
     <div class="cell">c</div>
  </div>
</div>

Как мне повторить их так, чтобы я создал ту же структуру, но с <table> вместо <div id="table">, <tr> вместо <div class="row"> и <td> с содержимым div вместо <div class="cell">;

Я пытался сделать что-то вроде

 let topics_table = '<table>'
                $('#table > .row').each(function(){
                    topics_table += '<tr>'
                        $(this + ' .cell').each(function(that){
                            topics_table += '<td>' + that.text() + '</td>'    
                        })
                    topics_table += '</tr>';
                })
 topics_table += '</table>`

Но я получаю ошибку ...

Answer 1

$(this + ' .cell')

Должно быть

$(this).find('.cell')
// or
$('.cell', this)

Вы пытаетесь объединить строку с элементом DOM.

.each(function(that){
   topics_table += '<td>' + that.text() + '</td>'    
})

^^, что также является проблемой, поскольку jQuery передает в качестве первого аргумента индекс, а не элемент.

.each(function(index, that){
   topics_table += '<td>' + that.innerText + '</td>'    
})