использование селектора jquery для изменения атрибута в переменной, возвращаемой из запроса ajax

Question

Я пытаюсь получить имя файла filename.txt (содержит html), используя ajax, и изменить путь src в переменной данных, прежде чем загрузить его в целевой div. Если я сначала загружаю его в div, браузер сначала запрашивает сломанное изображение, и я не хочу этого, поэтому я хотел бы выполнить свою обработку, прежде чем загружать что-либо на страницу.

Я могу получить значения src, но не могу их изменить. В этом примере значения src не изменены. Есть ли способ сделать это с помощью селекторов или они могут только изменять элементы DOM? В противном случае мне, возможно, придется заменить некоторое регулярное выражение, но использование селектора будет более удобным, если это возможно.

  $.ajax(
  {
     url: getDate+'/'+name+'.txt',
     success: function(data)
     {
        $('img', data).attr('src', 'new_test_src');
        $('#'+target).fadeOut('slow', function(){
           $('#'+target).html(data);

           $('#'+target).fadeIn('slow');
        });

     }
  });

Моя причина в том, что я создаю полностью автономную систему шаблонов javascript для информационного бюллетеня, и поскольку изображения и другие материалы загружаются через веб-менеджер drupal, я хочу, чтобы создатели контента сделали свои пути очень короткими и простыми, и тогда я смогу измените их, прежде чем загружать содержимое. Это также будет распространяться на компакт-диске, поэтому мне нужно изменить пути для этого, чтобы они все еще работали.

Answer 1

Вы можете изменить HTML, не добавляя его на страницу:

var divHTML = "<div><img id='a' src='old'></div>";
var newHTML = $(divHTML);
$("#a", newHTML).attr('src', 'NEW');
alert(newHTML.html());
​    

Смотрите это в действии: http://jsfiddle.net/23B8f/1/

Answer 2

Я думаю, вам нужно будет записать возвращенные данные в переменную, прежде чем что-либо манипулировать. Попробуйте это:

$.ajax(
  {
     url: getDate+'/'+name+'.txt',
     dataType: "html",
     success: function(data)
     {
        var html = data;
        $('img', html).attr('src', 'new_test_src');
        $('#'+target).fadeOut('slow', function(){
           $('#'+target).html(html);
           $('#'+target).fadeIn('slow');
        });

     }
  });

Кроме того, я бы установил для параметра dataType значение html , чтобы быть в безопасности. К сожалению, я не могу проверить это прямо сейчас. Еще одна вещь, которую стоит учесть, в руководстве говорится об этих возвращенных данных:

"html": возвращает HTML в виде обычного текста; включенные теги сценария оцениваются при вставке в DOM.

так что вы также можете попробовать обернуть возвращаемые данные в $() перед использованием любых методов jQuery, например:

$('img', $(html)).attr('src', 'new_test_src');