2

我正在阅读有关该功能的jquery 手册：.after()

$('.container').after($('h2'));

它说

“如果以这种方式选择的元素插入到其他地方，它将被移动而不是克隆”

所以如果我有多个 <div class='before' onclick='afterfunction();'><div>，

我想<div class='after'></div>在点击了哪个 div 之后放置（让它移动，而不是克隆）我会做这样的事情吗？

var afterdiv = "<div class='after'></div>";
function afterfunction() {
    $(this).after(afterdiv);
}

感谢你的帮助！

4

2 回答 2

3

像你说的：

DOM 中的一个元素也可以被选中并插入到另一个元素之后： $('.container').after($('h2'));
如果以这种方式选择的元素被插入到别处，它将被移动而不是克隆：

但是你错过了大胆的部分。

$('.before').click(function() {
  afterfunction(this);
});

// this will not work cause you'll append a string to your DOM
// var afterdiv = "<div class='after'>ola</div>";
// and will repeatedly be appended after each action.

// instead define your element by wrapping it into a $( )
  var afterdiv = $("<div class='after'>ola</div>");
// now 'afterdiv' variable is binded to that element only once inside the DOM 

function afterfunction(elem) {
   $(elem).after(afterdiv);
}

而且您不需要.remove()它（就像这里的答案中错误地建议一样。）

演示 jsFiddle

于 2012-05-16T20:00:32.527 回答
1

像这样制作.beforediv：

<div class='before'><div/>

然后尝试，

$('.before').on('click', function() {
  afterfunction(this);
});

function afterfunction(el) {
  var afterdiv = "<div class='after'></div>";
  $('.after').remove(); // remove previous `.after`
  $(el).after(afterdiv); // add newly after the clicked div
}

演示

于 2012-05-16T19:43:47.867 回答