當你有重複的容器時，jQuery在DOM中移動元素

Question

當我有多個具有相同id和類的容器時，如何移動dom中的元素？我想要將第二個元素下面的第一個元素移動到第二個元素下面。

我第一次嘗試

$('.one').insertAfter('.two'); 

但這插入與類。二每個元素之後在我的DOM。一元素的量。我如何只將元素移動到它自己的容器中？澄清 - 我想在兩個容器中移動元素。

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
</div> 

<div class="container"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
</div> 

編輯：寫出容器而不是類的ID。固定。

Answer 1

首先，ID必須在文檔方面獨特的，使用類來代替：

<div class="container">...</div> 

然後，你可以使用after()方法，而不是使用功能：

$('.two').after(function() { 
    return $(this).closest('.container').children('.one'); 
}); 

使用insertAfter()方法，你會需要一個each迴路：

$('.one').each(function() { 
    $(this).insertAfter($(this).closest('.container').children('.two')); 
}); 

-jsFiddle-