如何追加元素以出现在 JQuery 中的特定点？

Question

我有一个包含以下内容的弹出窗口：

  <div class="container">
    <span class="delete-x">X</span>
    <textarea class="text-box"></textarea>
    <span class="add-text">+ Add Text</span>
  </div>

当我单击带有“+添加文本”的跨度时，我想要一个具有所有相同元素的相同容器（删除 "x" 跨度、文本区域和另一个“+添加文本”跨度）出现在容器下方，带有触发事件的“+添加文本”跨度。这是我目前的jQuery：

$('.add-text').click(_.bind(function(e) {
  var $container = $('<div class="container"></div>').appendTo(this.$contents); // Underscore.js bind sets 'this' to the context of the popup window. I create the container element and append it to the popup window.
 $('.delete-x').clone(true).appendTo($container);
 $('.text-box').clone(true).appendTo($container);
 $('.add-text').clone(true).appendTo($container);

}, this));

这成功生成了一个带有文本框和我想要的跨度的新容器。但是它将它附加到弹出窗口的底部。我希望它出现在我单击的特定“+ 添加文本”跨度的容器之后。我试过 insertAfter() 方法和 jQuery (after) 方法但无济于事。这里还有一个 post 来自某人，他试图做类似的事情，但有 table 行（How to append after a specific id in jquery），但这对我不起作用。

我需要使用Underscore.js绑定方法将'this'关键字设置为弹出window的上下文，如解释的在我对上面 jQuery 代码的评论中。如果不是因为这个，我想我可以使用 .after($(this)) 让我的容器出现在我想要的地方......

还有什么我可以尝试的吗？

谢谢你 ~加维恩

Answer 1

您可以使用 insertAfter() 方法将新的 $container 直接放在被点击的那个之后。试试这个：

var $container = $('<div class="container"></div>').insertAfter($(e.target).closest('.container'));

如何追加元素以出现在 JQuery 中的特定点？

How to append elements to appear at specific point in JQuery?

jquery

underscore.js

positioning

dom-manipulation