「これに追加」を使用してdivを別のものに追加するにはどうすればよいですか？

Question

私は3つの異なるdivがあり、それぞれに編集ボタンがあります。現在、編集ボタンをクリックすると、ページが一番下にスクロールします。だから私がやっていることは、編集をクリックすると、クリックされた編集ボタンの下に編集ボックスが追加されるということです。

これは私のコードです。

<div class="sandbox" id="orange_sandbox"> 
    <span class="edit">Edit</span> 

</div> 
<div class="sandbox" id="blue_sandbox"> 
    <span class="edit">Edit</span> 

</div> 
<div class="sandbox" id="green_sandbox"> 
    <span class="edit">Edit</span> 

</div> 

<div class="kittens"> 
    The form will go here 
</div> 

<script> 
    $('.edit').on('click', function(){ 
     $('.kittens').appendTo("this"); 
    }); 
</script> 

私は動作させることができません。それらのdivが関連していないので、親に追加する必要はないと思います。

Answer 1

$('.edit').on('click', function(){ 
 
     $(this).after($('.kittens')); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sandbox" id="orange_sandbox"> 
 
    <span class="edit">Edit</span> 
 

 
</div> 
 
<div class="sandbox" id="blue_sandbox"> 
 
    <span class="edit">Edit</span> 
 

 
</div> 
 
<div class="sandbox" id="green_sandbox"> 
 
    <span class="edit">Edit</span> 
 

 
</div> 
 

 
<div class="kittens"> 
 
    The form will go here 
 
</div>

1. 使用thisコンテキスト。
2. 使用.after()

説明：挿入コンテンツ、マッチした要素の集合内の各要素の後、パラメータで指定されました。

Answer 2

あなたは非常に近くでした。あなたのコードに$('.kittens').appendTo(this);という小さな変更を加えるだけです。

$(document).ready(function() { 
 
    $('.edit').on('click', function() { 
 
    $('.kittens').appendTo(this); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="sandbox" id="orange_sandbox"> 
 
    <span class="edit">Edit</span> 
 

 
</div> 
 
<div class="sandbox" id="blue_sandbox"> 
 
    <span class="edit">Edit</span> 
 

 
</div> 
 
<div class="sandbox" id="green_sandbox"> 
 
    <span class="edit">Edit</span> 
 

 
</div> 
 

 
<div class="kittens"> 
 
    The form will go here 
 
</div>