與jQuery的

Question

錨標籤包裝圖像標籤

我的HTML結構如下：

<div class="content"> 
<img alt="" src="a.png" height="400" width="400"> 
<a href="https:www.google.com" class="avatar" ></a> 
</div> 
<div class="content"> 
<img alt="" src="b.png" height="400" width="400"> 
<a href="https:www.yahoo.com" class="avatar" ></a> 
</div> 

我想包裝的jQuery圖像標籤周圍的錨標記，所以我的最終結果將是：

<div class="content"> 
<a href="https:www.google.com" class="avatar" > 
<img alt="" src="a.png" height="400" width="400"> 
</a> 
</div> 
<div class="content"> 
<a href="https:www.yahoo.com" class="avatar" > 
<img alt="" src="b.png" height="400" width="400"> 
</a> 
</div> 

用jQuery做這件事最簡單的方法是什麼？

感謝，

Answer 1

你可以抓住的圖像，並將其追加到錨標記，像這樣：

jQuery('img').each(function() { 
    $(this).appendTo($(this).next('a')); 
}); 

Fiddle

Answer 2

試試這個：

$('.content > img').each(function() { 
    var that = $(this); 

    //Clone the image and store it in a variable 
    var img = that.clone(); 

    //Select the anchor next to each image and append the cloned image 
    that.next('a').html(img); 

    //Remove the original image 
    that.remove(); 
}); 

Answer 3

你會想使用.wrap()功能。這是非常快速和簡單的

$("content img").each(function(el, i){ 
    var a = $(this).next().clone(); 
    $(this).next().remove(); 
    $(this).wrap(a); 
}); 

http://api.jquery.com/wrap/

Answer 4

考慮以下幾點：

$('.content img').each(function() { 
    $(this).next('a').wrapInner($(this)); 
}); 

DEMO

---

$('.content img').each(function() { 
    $(this).next('a').html($(this).clone()); 
    $(this).remove(); 
}); 

DEMO