Question

我在页面上有两个表格，这些表格以可怕的方式用于布局目的。我需要将这些表的内容移动到两个容器中，每个表对应一个容器。我正在处理以下HTML。

<p>Paragraph of some stuff.</p>

<table>
  <tbody>
    <tr>
      <td>Image</td>
    </tr>
    <tr>
      <td>Image</td>
    </tr>
  </tbody>
</table>

<p>Paragraph with more stuff</p>

<table>
  <tbody>
    <tr>
      <td>Image</td>
    </tr>
    <tr>
      <td><em>Some fancy text</em></td>
    </tr>
  </tbody>
</table>

我无法打开现有的桌子。我必须修改克隆的材料。所以我在每个表之前创建一些新的容器，我想用表jquery从表中推出东西并打开它，然后换成一些更合法的元素。

问题是我无法将所有克隆元素附加到违规表之前的特殊容器中。我用这个jquery：

$('table').each(function () {
  $(this).before('<div class="ae-replaceTable"></div>');
  $('td').each( function() {
    $('.ae-replaceTable').append($(this).clone());
  });
});

$('.ae-replaceTable img').wrap('<p></p>');
$('.ae-replaceTable td').children().unwrap();

但我最终得到的是两个容器中两个表的所有内容。我需要它们在为它们创建的容器中保持独立，就在它所来自的特定表之上。所以表1中的所有内容都以div 1结束，而表2中的所有内容都以div 2结束。就像这样。

<p>Paragraph of some stuff.</p>

<div class="ae-replaceTable">
  <p>Image</p>
  <p>Image</p>
</div>

<table>
  <tbody>
    <tr>
      <td>Image 1</td>
    </tr>
    <tr>
      <td>Image 2</td>
    </tr>
  </tbody>
</table>

<p>Paragraph with more stuff</p>

<div class="ae-replaceTable">
  <p>Image 3</p>
  <p>Some fancy text.</p>
</div>

<table>
  <tbody>
    <tr>
      <td>Image 3</td>
    </tr>
    <tr>
      <td><p>Some fancy text.</p></td>
    </tr>
  </tbody>
</table>

提前致谢！

编辑以澄清：我在整个网站上都遇到了这个问题，因此我无法浏览每个页面并为每个表格容器创建唯一的类。我需要能够使用一个类名来解决这个问题。

Answer 1

这是非常简陋的，但如果你愿意，我们可以把它搞定。

FIDDLE

JS

$('#copy').on('click', function(){
   $(".upper tr td:eq(0)").clone().appendTo('.toptable');
   $(".upper tr td:eq(1)").clone().appendTo('.toptable');
   $(".lower tr td:eq(0)").clone().appendTo('.bottomtable');
   $(".lower tr td:eq(1)").clone().appendTo('.bottomtable');

   $('.toptable').css('display', 'block');
   $('.bottomtable').css('display', 'block');
});

Answer 2

我明白了！我只是想错了路。这是我的新jquery：

$('table').before('<div class="ae-replaceTable"></div>');
$('table').each(function(){
  $(this).clone().insertBefore(this);
});

$('.ae-replaceTable').each(function() {
  $(this).append($(this).next('table'));
});

$('.ae-replaceTable img').wrap('<p></p>');
$('.ae-replaceTable td').children().unwrap();
$('.ae-replaceTable tr').children().unwrap();
$('.ae-replaceTable tbody').children().unwrap();
$('.ae-replaceTable table').children().unwrap();

Jquery从附加到同一容器中的多个位置克隆对象

2 个答案: