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

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

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