如何在追加元素之前解析元素的内容？（jQuery）

我有一个html字符串我想直接转储到一个元素。这个html字符串包含一些标签，并且我需要在其src属性的前面添加一个路径。如何在追加元素之前解析元素的内容？（jQuery）

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

// 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但它是通过它的创建后，该元素不错，只是$。每（）...

注：我已经通过问这个问题，创建一个有学问jQuery元素通过$(htmlString)立即导致在htmlString内的所有资源上加载尝试。所以，我必须以某种方式操作htmlString，然后才能将其包装到jQuery对象中。

来源

2012-02-20 ericsoco

尝试在'each（）'中使用原始的jQuery对象。删除'我，el'并用$（this）'替换'$（el）'。不知道这是否会做一些事情，但嘿，很容易尝试。 – elclanrs 2012-02-20 19:22:24

@elclanrs没有骰子......可以说是更清洁的代码寿。 – ericsoco 2012-02-20 19:26:12

您可以尝试将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);

DEMO：http://jsfiddle.net/de2dg/3/

来源

2012-02-20 19:26:57

啊谢谢你取代这个答案！我看到它，计划尝试它，刷新，它已经走了....现在尝试。 ps，有没有办法在SO/StackExchange中引导消息用户？想要ping你，但看不到方法... – ericsoco 2012-02-20 19:57:58

@ericsoco：不幸的是，你不能直接向用户发送消息。唯一的办法是评论他们的一个职位。我删除了这个，因为我不确定它是否适用于所有浏览器（或者甚至是否正确）。它*应该*现在在大多数浏览器中工作。 – 2012-02-20 20:00:56

选择了这个答案，因为它保留了原始html完整，而@elclanrs的答案（同时也是有用的）只提取标签。 – ericsoco 2012-02-20 20:25:39

你为什么不与正则表达式中提取图像字符串并使用数组来保存图像并最后添加所有内容？

var str = '<img src=\'img1.jpg\'/><br/><img src=\'img2.jpg\'/>', 
    patt = /\w+\d+\.(jpg|png|gif)+/g, // Probably could be better but works 
    imgs = str.match(patt), 
    prefix = 'some/path/to/img/', 
    output = ''; 
$.each(imgs, function(i, v){ output += '<img src="'+ prefix + v +'"/>'; }); 
$('<div />').append(output).appendTo('#el');

http://jsfiddle.net/DmKys/

来源

2012-02-20 19:37:50 elclanrs

因为htmlString有一堆的 S之间穿插其他的东西，并通过外部XML文件进来...... – ericsoco 2012-02-20 19:43:00

然后你可以使用正则表达式来从一个字符串中提取图片的路径，然后遍历数组等等。 .. – elclanrs 2012-02-20 20:02:54

哦，听起来很可爱，但我用正则表达式不好。有小费吗？ – ericsoco 2012-02-20 20:05:02

一类直接在HTML的输入如“隐藏”添加到图像和与显示的CSS定义它：无;它不会被首先绘制。

然后在您的每个循环中更改源后删除此类。

编辑:(最后我知道他的意思）将属性从src更改为pre_src，并在每个循环中使用此属性来附加新的“src”属性，并在此之后删除pre_src。 [removeAttr（）] 因此，资源将不会被加载，你可以使用你的每个循环...

来源

2012-02-20 19:41:48 Thomas

each（）必须在jQuery对象上调用;只要一个jQuery对象被创建任何 S内它试图加载。所以，这也不起作用。但是，我现在看到，这就是我的答案中不可避免的一部分 - 我需要馅它变成$之前解析htmlString（）。 – ericsoco 2012-02-20 19:47:14

pleae表达自己更好的下一次:) – Thomas 2012-02-20 19:58:39

我很想表达自己，以及可能的。有小费吗？你对我的问题感到困惑吗？顺便说一句，你的编辑有与你原来的建议相同的问题。 – ericsoco 2012-02-20 20:02:36

回答

相关问题