附加/添加到容器

Question

我有以下的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元素前置於每個的容器。 我該如何解決這個問題？

謝謝！

Answer 1

你可以嘗試each方法：

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

Fiddle

Answer 2

對每個a.child進行迭代，並加上它。

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

http://jsfiddle.net/mattball/tRNUS

Answer 3

div.container和a.child被作爲單獨的選擇。他們不相關。

你將不得不遍歷所有的a.child元素和選擇的父元素：

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

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