Question

我现在已经在脑子上绞了一段时间：我需要获得一个jQuery函数来移动.THIS的第一个.THAT后面的<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>实例。我把它分解为这个简单的HTML示例：

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>

而不是：

ResolveAsync

那么如何使用jQuery在第一个实例之后移动每个实例？

Answer 1

您需要单独处理每个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>

{{1}}

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

1 个答案: