Jquery 每三行（在 dom-操作之前）向上移动一行

Question

我有一个 table 想要重新整理。 table 看起来像这样：

    <table border=1>
     <tr>
      <td>image 1</td>
      <td>image 2</td>
      <td>image 3</td>
      <td>image 4</td>
     </tr>
      <tr>
      <td>text 1</td>
      <td>text 2</td>
      <td>text 3</td>
      <td>text 4</td>
     </tr>
     <tr>
      <td>image 5</td>
      <td>image 6</td>
      <td>image 7</td>
      <td>image 8</td>
     </tr>
      <tr>
      <td>text 5</td>
       <td>text 6</td>
      <td>text 7</td>
      <td>text 8</td>
     </tr>
    </table>

我希望这是我的最终结果：

 <table border=1>
     <tr>
      <td>image 1</td>
      <td>image 2</td>
     </tr>
     <tr>
      <td>text 1</td>
      <td>text 2</td>
     </tr>
     <tr>
      <td>image 3</td>
      <td>image 4</td>                
     </tr>
     <tr>
      <td>text 3</td>
      <td>text 4</td>
     </tr>
     <tr>
      <td>image 5</td>
      <td>image 6</td>
     </tr>
     <tr>
      <td>text 5</td>
      <td>text 6</td>
     </tr>
     <tr>
      <td>image 7</td>
      <td>image 8</td>
     </tr>
     <tr>
      <td>text 7</td>
      <td>text 8</td>
     </tr>
    </table>

我想出了如何将单元格移动到新行的方法：

$('table tr').each(function(e)
{
    $('<tr>').insertAfter(this).append($('>:gt(1)',this));
});

但是我想每隔三行移动到每隔两行。此代码将在操作后每三行移动一次，但我需要它在操作前每三行移动一次：

$('table tr:nth-child(3n)').each(function(e)
{     
    $(this).insertBefore($(this).prev());    
});

我怎样才能做到这一点？还有更好的方法吗？我尝试在划行时这样做，但这也没有用。我这里有一个 fiddle:

http://jsfiddle.net/2vd5kzq6/40/

我想这样做是为了让 table 更加移动友好。因此，如果有人知道在 CSS 中有效的解决方案，那就更好了，但我认为 CSS.

需要进行大量操作

提前致谢！

Answer 1

您自己的解决方案即将完成。你只犯了一个错误。

您不想每三行交换一次，而是每 4 -1 行交换一次！可视化它：您选择了第 3、6、9 行...但您需要 3、7、11...

因此，只需在您的代码中添加一个 prev():

$('table tr:nth-child(4n)').prev().each(function(e)
{     
  $(this).insertBefore($(this).prev());    
});

在此处查看结果：http://jsfiddle.net/2vd5kzq6/41/

Jquery 每三行（在 dom-操作之前）向上移动一行

Jquery move every third row (before dom-manipulation) up one row

css

jquery

dom-manipulation