使用jquery替換html字符串中的所有圖像

Question

我有一個html字符串，我想用figure標記替換所有img標記。這是我的代碼

$('img',$(html)).replaceWith(function(){ 
    var figure = '<figure><img src="'+$(this).src+'"><figcaption>'+$(this).attr('alt')+'</figcaption></figure>'; 
    return $(figure); 
}); 

此代碼不起作用。我也想在操作完成後返回生成的html字符串，但看起來replace只返回已被替換的元素。那我該怎麼做？

Answer 1

$(this).src是無效的代碼。在這種情況下，您需要$(this).attr('src')或僅需this.src。

然而，真正的問題可能是你期待html就地改變 - 除非你不上html使用replaceWith，但$(html)。換句話說，你的HTML字符串不會被改變;你的臨時jQuery對象，然後消失。

嘗試這樣：

var html = /* whatever you want */; 
var $html = $(html); // jQuery object 

$('img', $html).replaceWith(function() { 
    return '<figure><img src="' + $(this).attr('src') + '"><figcaption>' + $(this).attr('alt') + '</figcaption></figure>'; 
}); 

html = $html.html(); // update html string, if necessary 

http://jsfiddle.net/mblase75/77aXS/

要替換或包裹