DOM要素を独自のコンテナに入れたまま移動する

Question

DOM要素をDOM内に移動しますが、DOM要素を独自のコンテナに保持したままにします。私はまだdivの.containの内側にそれを維持しながら、ちょうどEの下に、このリストの最後にAを含む.bitを入れたい

<div class="contain"> 
    <div class="bit">A</div> 
    <div class="bit">B</div> 
    <div class="bit">C</div> 
    <div class="bit">D</div> 
    <div class="bit">E</div> 
</div> 

：

は、次のHTMLを取ります。

$('.contain').find('bit').first().appendTo('.contain'); 

と：：

$('.contain').find('bit').first().insertAfter($('.contain').find('bit').last()); 

そして、それらのどちらも動作し

は、私は、次の試してみました。

私はHTMLをほとんど制御できません。たとえば、私はそれぞれ.bitに独自の一意のIDを与えることはできません。

誰かが私が間違っていることを説明できますか？

Answer 1

ちょうどは同じコンテナににそれを追加し、Aは、リストの最後にを移動です。

あなたの2回の試行がうまくいきます - あなたはfind('.bit')の部分の.が見つかりませんでした。

下記を参照のデモ：

$('.contain').append($('.contain .bit:first-child')); 
 

 
// the below works too 
 
// $('.contain').find('.bit').first().appendTo('.contain'); 
 

 
// and even this works 
 
// $('.contain').find('.bit').first().insertAfter($('.contain').find('.bit').last());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="contain"> 
 
    <div class="bit">A</div> 
 
    <div class="bit">B</div> 
 
    <div class="bit">C</div> 
 
    <div class="bit">D</div> 
 
    <div class="bit">E</div> 
 
</div>

Answer 2

あなたはすでに.containスニペットを作業

$('.contain').find('.bit').first().appendTo('.contain'); 

に使用するクラスセレクタ.を、使用する必要があります。

$('.contain').find('.bit').first().appendTo('.contain');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="contain"> 
 
    <div class="bit">A</div> 
 
    <div class="bit">B</div> 
 
    <div class="bit">C</div> 
 
    <div class="bit">D</div> 
 
    <div class="bit">E</div> 
 
</div>