使用 jquery 选择器更改从 ajax 请求返回的变量中的属性

Question

我正在尝试使用 ajax 拉入 filename.txt（包含 html），并在将数据变量加载到目标 div 之前更改数据变量中的 src 路径。如果我首先将其加载到 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 网络文件管理器上传的，我希望内容创建者的路径非常简短，然后我可以在我加载内容之前修改它们。这也将在 CD 上分发，因此我需要更改路径以便它们仍然有效。

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');