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

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>

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

Move (each) element to first-matched element

jquery

jquery-traversing