jquery - 在附加元素之前如何解析它的内容？ (jQuery)

Question

我有一个 html 字符串，我想直接转储到一个元素中。这个 html 字符串包含一些标签，我需要在它们的“src”属性前面添加一个路径。

目前，我正在做这样的事情:

// note, htmlString is coming in from an external xml file...
var htmlString = "<img src='img1.jpg'/><br/><img src='img2.jpg'/>";
var imgContainer = $('<div />');
imgContainer.append(htmlString);

var prefix = "some/path/to/img/";
imgContainer.find('img').each(function(i, el) {
    $(el).attr('src', prefix + $(el).attr('src'));
});

这可行，但我看到非前置路径的资源加载失败。浏览器似乎在创建 imgContainer 元素后立即尝试加载图像，即使它没有附加到文档中。我想避免那些失败的加载。

我想我可以在附加之前解析 htmlString，但在创建元素后只需 $.each() 就很好了...

注意:通过询问这个问题，我了解到通过 $(htmlString) 创建 jQuery 元素会立即导致对 htmlString< 中的所有资源进行加载尝试。因此，在将 htmlString 打包到 jQuery 对象之前，我必须以某种方式对其进行操作。

Answer 1

您可以尝试将 htmlString 解析为 XML，修改它，然后将其附加到 DOM。

类似这样的东西(不确定XMLSerializer是否适用于所有浏览器，我认为它是IE中的this.xml):

var htmlString = "<img src='img1.jpg'/><br/><img src='img2.jpg'/>",
imgContainer = $('<div />')
xml = $.parseXML('<xml>'+htmlString+'</xml>'), // add `<xml>` because
                                               // XML needs a root element
prefix = "some/path/to/img/",
// needed to convert XML to HTML
sXML = typeof XMLSerializer !== 'undefined' && new XMLSerializer;

$(xml).find('img').each(function(i, el) { // replace the SRC
    $(el).attr('src', prefix + $(el).attr('src'));
});

// Convert XML to HTML
// http://stackoverflow.com/a/829724
htmlString = $(xml).find('xml').contents().map(function(i,v){
    return v.xml || sXML.serializeToString(v);
}).get().join('');

imgContainer.append(htmlString);

演示:http://jsfiddle.net/de2dg/3/