javascript - 我怎样才能转换使用 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>

有没有办法解决这个问题？我究竟做错了什么？

标签： javascripthtmljquery

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>