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

Question

我有一张要重新组织的表。表格如下所示：

    <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 需要进行很多操作。

提前致谢！

Answer 1

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

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