将（每个）元素移动到第一个匹配的元素

Question

我一直在对此进行一段时间的思考：我需要获得一个jQuery函数，以便在第一个跟随的.THAT之后移动.THIS的每个实例。我打破了下来，这个简单的HTML例子：

<table><tr> 
    <td class="1a">1a</td> 
    <td class="2a">2a</td> 
    <td class="3a THIS">3a</td> 
    <td class="4a">4a</td> 
    <td class="5a THAT">5a</td> 
</tr> 
<tr> 
    <td class="1a THIS">1a</td> 
    <td class="2a">2a</td> 
    <td class="3a">3a</td> 
    <td class="4a THAT">4a</td> 
    <td class="5a">5a</td> 
</tr></table> 

而且我想这会工作

var source = jQuery('.THIS'); 
var destination = jQuery(source).nextAll('.THAT'); 
jQuery(source).insertAfter(destination); 

但每当我试试这个，这两个来源（.THIS）的.THAT最后一个实例后得到感动，像这样：

<table><tr> 
    <td class="1a">1a</td> 
    <td class="2a">2a</td> 
    <td class="4a">4a</td> 
    <td class="5a THAT">5a</td> 
</tr> 
<tr> 
    <td class="2a">2a</td> 
    <td class="3a">3a</td> 
    <td class="4a THAT">4a</td> 
    <td class="3a THIS">3a</td> 
    <td class="1a THIS">1a</td> 
    <td class="5a">5a</td> 
</tr></table> 

取而代之的是：

<table><tr> 
    <td class="1a">1a</td> 
    <td class="2a">2a</td> 
    <td class="4a">4a</td> 
    <td class="5a THAT">5a</td> 
    <td class="3a THIS">3a</td> 
</tr> 
<tr> 
    <td class="2a">2a</td> 
    <td class="3a">3a</td> 
    <td class="4a THAT">4a</td> 
    <td class="1a THIS">1a</td> 
    <td class="5a">5a</td> 
</tr></table> 

那么我怎样才能使用jQuery移动每个实例后的第一个另一个？

Answer 1

您需要单独解决每个.THIS，并将其放置在第一个条目的nextAll()的结果之后。

var source = jQuery('.THIS'); 
 

 
source.each(
 
    function() { 
 
    var $this = jQuery(this); 
 

 
    $this.insertAfter($this.nextAll('.THAT')[0]); 
 
    } 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="1a">1a</td> 
 
    <td class="2a">2a</td> 
 
    <td class="3a THIS">3a</td> 
 
    <td class="4a">4a</td> 
 
    <td class="5a THAT">5a</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="1a THIS">1a</td> 
 
    <td class="2a">2a</td> 
 
    <td class="3a">3a</td> 
 
    <td class="4a THAT">4a</td> 
 
    <td class="5a">5a</td> 
 
    </tr> 
 
</table>