Как я могу разобрать содержимое элемента перед его добавлением? (JQuery) - PullRequest
Новая
       26

Как я могу разобрать содержимое элемента перед его добавлением? (JQuery)

1 голос
/ 20 февраля 2012

У меня есть 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 () пройти через элемент после его создания ...

ПРИМЕЧАНИЕ: Задав этот вопрос, я узнал, что создание элемента jQuery с помощью $(htmlString) немедленно вызывает попытки загрузки всех ресурсов в htmlString.Поэтому мне нужно каким-то образом манипулировать htmlString перед упаковкой его в объект jQuery.

Ответы [ 3 ]

3 голосов
/ 20 февраля 2012

Вы можете попытаться проанализировать htmlString как XML, изменить его, а затем добавить его в DOM.

Примерно так (Не уверен, что XMLSerializer работает ввсе браузеры, я думаю, что это this.xml в IE): 

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/

1 голос
/ 20 февраля 2012

Почему бы вам не извлечь изображения с помощью регулярного выражения из строки и использовать массив для хранения изображений и наконец добавить все? 

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/

0 голосов
/ 20 февраля 2012

Добавьте класс к изображениям непосредственно в html-ввод, например «скрытый», и определите его в css с помощью display: none; что он не обращается в первую очередь.

Затем в вашем каждом цикле удалите этот класс после изменения источника.

РЕДАКТИРОВАТЬ: (наконец-то я знаю, что он имеет в виду) измените атрибут с src на что-то похожее на pre_src и используйте этот атрибут в вашем каждом цикле, чтобы присоединить новый атрибут "src" и удалить pre_src после этого. [RemoveAttr ()] Таким образом, ресурс не будет загружен, и вы можете использовать каждый цикл ...

...