Question

所以，我有3个不同的div，每个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>

使用this上下文。
使用.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>

如何通过“附加到此”来将div添加到另一个中？

2 个答案: