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

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

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

我想这样做是为了让表格对移动设备更加友好。因此，如果有人知道适用于 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/