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 web文件管理器上传的，我希望内容创建者保持他们的路径非常简短，然后我可以在加载内容之前修改它们。这也将在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');

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

2 个答案: