追加/前置到容器答案

【问题标题】：Append/prepend to the container追加/前置到容器
【发布时间】：2012-08-13 09:29:59
【问题描述】：

我有以下 HTML 代码：

<div class="container">
    <div><div>...</div><a class="child" href="#">Example</a></div>..</div></div>
</div>
<div class="container">
    <div><div>...</div><a class="child" href="#">Example</a></div>..</div></div>
</div>
.
.
.
<div class="container">
    <div><div>...</div><a class="child" href="#">Example</a></div>..</div></div>
</div>

我有以下 JavaScript 脚本：

$('a.child').prependTo('div.container');

但是，这段代码不是将每个a 元素添加到它们自己的容器中，而是将所有 a 元素添加到每个容器中。我该如何解决这个问题？

谢谢！

【问题讨论】：

标签： javascript jquery html append prepend

【解决方案1】：

遍历每个a.child，并将其添加到前面。

$('a.child').each(function ()
{
    var $this = $(this);
    $this.prependTo($this.closest('div.container'));
});

http://jsfiddle.net/mattball/tRNUS

【讨论】：

【解决方案2】：

你可以试试each方法：

$('a.child').each(function(){
  $(this).prependTo($(this).closest('.container'));
})

Fiddle

【讨论】：

感谢大家的回答，他们都非常相似并且为我工作。这个似乎是“最干净的”

【解决方案3】：

div.container 和 a.child 充当单独的选择器。它们不相关。

您必须遍历 a.child 元素并选择父元素：

$('a.child').each(function() {
  var $this = $(this);

  $this.parents('div.container').prepend($this);
});

【讨论】：