將父元素移動到同級？

Question

我需要移動一個父錨以更緊密地包裝一個子圖像。我的HTML的一個簡化版本是：

<a class="link"> 
    <span class="container"> 
    <img class="image" /> 
    <span>An image caption.</span> 
    </span> 
</a> 

我在尋找這樣的結果：

<span class="container"> 
    <a class="link"> 
    <img class="image" /> 
    </a> 
    <span>An image caption.</span> 
</span> 

我想：

/* I have to process each anchor individually and only make 
* this move if there's a span.container as the first child. 
*/ 
$('a.link').each(function() { 
    if ($(this).children('span.container').length > 0) { 
    $(this).find('img.image').wrap($(this)); 
    $(this).children('span.container').unwrap(); 
    } 
}); 

我結束了：

<span class="container"> 
    <a class="link"> 
    <span class="container"> 
     <img class="image"> 
     <img class="image" /> 
     </img> 
     <span>An image caption.</span> 
    </span> 
    </a> 
    <span>An image caption.</span> 
</span> 

注意事項：我是n00b。我堅持使用jQuery 1.3.2。我正在使用an unwrap() plugin，這看起來像上面看到的那樣工作。問題是我想我的wrap($(this))？ $(this)應該只包含<a class="link">而不是它的孩子吧？它似乎包含孩子，他們被插入包裝，並且我得到重複的HTML。許多在此先感謝...

Answer 1

$('.link').each(function(){ 
    var $me = $(this); 
    $me.children('.container').unwrap().find('img').wrap($me); 
}); 

Fiddle