將（每個）元素移動到第一個匹配的元素

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>