Как я могу преобразовать теги <div>в теги <tr>и <td>с помощью функции jquery?

Question

Я пытаюсь следовать ответам @ ishtiaq-ahmed и @ yob на этот вопрос здесь о преобразовании тегов <div> в теги <tr> и <td>. Однако вывод на самом деле не отображает то, для чего предназначена функция, и вместо этого классы <div> остаются как классы <div>. Код выглядит следующим образом:

var div2table = $('.tr').map(function() {
  var issue = $(this);
  var tdline = issue.find('.td').map(function() {
    return '<td>' + $(this).text();
  }).get().join('</td>');
  return '<tr>' + tdline + '</td>';
}).get().join('</tr>');

div2table = '<table>' + div2table + '</tr></table>';

console.log(div2table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='tr'>
  <div class='td'>this will be 1st TD</div>
  <div class='td'>this will be 2nd TD</div>
  <div class='td'>this will be 3rd TD</div>
</div>
<div class='tr'>
  <div class='td'>this will be 1st TD</div>
  <div class='td'>this will be 2nd TD</div>
  <div class='td'>this will be 3rd TD</div>
</div>
<div class='tr'>
  <div class='td'>this will be 1st TD</div>
  <div class='td'>this will be 2nd TD</div>
  <div class='td'>this will be 3rd TD</div>
</div>

Есть ли способ исправить это? Что я делаю не так?

Answer 1

Я добавил контейнер вокруг ваших элементов для облегчения доступа и просто заменил его содержимое выводом функции

var div2table = $('.container .tr').map(function() {
  var issue = $(this);
  var tdline = issue.find('.td').map(function() {
    return '<td>' + $(this).text();
  }).get().join('</td>');
  return '<tr>' + tdline + '</td>';
}).get().join('</tr>');

div2table = '<table>' + div2table + '</tr></table>';

$('.container').html(div2table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class='tr'>
    <div class='td'>this will be 1st TD</div>
    <div class='td'>this will be 2nd TD</div>
    <div class='td'>this will be 3rd TD</div>
  </div>
  <div class='tr'>
    <div class='td'>this will be 1st TD</div>
    <div class='td'>this will be 2nd TD</div>
    <div class='td'>this will be 3rd TD</div>
  </div>
  <div class='tr'>
    <div class='td'>this will be 1st TD</div>
    <div class='td'>this will be 2nd TD</div>
    <div class='td'>this will be 3rd TD</div>
  </div>
</div>