jquery - jQuery将每三行(在进行dom操作之前)上移一行

我有一张桌子要重组。该表如下所示：

    <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());
});

我该如何实现？还有更好的方法吗？我在做行时尝试这样做，但是那也不起作用。我在这里有一个小提琴：

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

我想这样做可以使桌子移动起来更加友好。因此，如果有人知道可以在CSS中使用的解决方案，那就更好了，但是我认为CSS会有很多操纵。

提前致谢！

最佳答案

您自己的解决方案已接近完成。您只犯了一个错误。

您不想交换每三行，而是每四行-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/