使用 jQuery 在变量中而不是在当前 DOM 中选择内容？答案

【问题标题】：Select content within a variable instead of within the current DOM with jQuery?使用 jQuery 在变量中而不是在当前 DOM 中选择内容？
【发布时间】：2011-10-01 15:34:02
【问题描述】：

我有一个使用 jQuery 的 ajax 函数，它定义了一个要调用的错误函数。当服务器上发生错误时，此错误函数将运行。 “jqXHR”中传递的变量之一包含一个名为 responseText 的属性。我想将此响应文本转储到页面上的 div 中，但响应文本包含一个完整的 HTML 文档。有什么方法可以像遍历常规 DOM 一样使用 jQuery 遍历这个包含 HTML 的变量？

$.ajax({
    blah blah blah...,
    error: function (jqXHR, textStatus, errorThrown)
    {
        var errorText = $(jqXHR.responseText).find('body').html();
        // The above line does not work. errorText is NULL.
        $('#mainContent').html(errorText);
    }
});

我想做类似上面代码 sn-p 的事情，但我这样做的方式不起作用。有没有办法遍历这个变量，就好像它是一个我可以用 jQuery 导航的 DOM？

更新

这是console.log($(jqXHR.responseText))

http://www.codetunnel.com/content/images/consolelog.jpg

【问题讨论】：

你能不能做一个console.log($(jqXHR.responseText)); 看看dom 是什么样子的...我知道jQuery 通常默认选择body 所以你可能不需要使用额外的 $() 和 jsut 需要做 errorText = $(jqXHR.responseText).html(); 或 errorText = $('#mainContent', jqXHR.responseText).html(); 你的回复是 text/html 而不是 xml 内容类型，对吧？
是的，响应是文本/html。出于某种原因，这仅在我不使用.html() 时才有效，但是除了 BODY 标记的内容之外，我还获得了 HEAD 标记的内容。

标签： javascript jquery html ajax dom

【解决方案1】：

对我来说也有一些甜蜜的发现。

这不起作用，因为在幕后，jQuery 正在创建一个文档片段并在其上设置 innerHtml 属性。这对<html> 和<body> 节点不起作用，因为它们不是文档节点类型——它们不能放入DOM。

相反，当您调用$('<html><body><b>foo</b></body></html>') 时，会创建一个片段，其中仅包含“<b>foo</b>”！所以，你只想要身体的一部分吗？只需返回：

$(jqXHR.responseText).html();

小提琴来证明我指的是：http://jsfiddle.net/L5PR5/1/

编辑#2

鉴于<head> 元素被放入其中，我认为您唯一的选择是使用子字符串：

var res = jqXHR.responseText;
$(res.substring(res.indexOf('<body'))).appendTo('#mainContent');

【讨论】：

你是对的，但由于某种原因，它只有在我离开 .html() 时才有效。当我只是做$('#mainContent').html($(jqXHR.responseText)) 时，我将 HEAD 部分的内容和 BODY 部分的内容注入到页面中。我怎样才能得到身体部分？ .html() 再次将 errorText 留空。
您忘记了$('#mainContent ').html('text') 和$('text').html() 之间的区别。您所做的是将 #mainContent 的 innerHtml 属性设置为您设置的字符串。我所做的是构建一个包含该 HTML 的新节点。我推荐这个：$(jqXHR.responseText).appendTo('#mainContent'); 我敢打赌这会奏效。
$('#mainContent').append(jqXHR.responseText) 给了我同样的结果。我有 HEAD 标签和 BODY 标签的内容。我只想要来自 jqXHR.responseText 的 BODY 的内容，而不是 HEAD 标记的内容。请查看我的更新以获取console.log($(jqXHR.responseText))
确实很有趣！请参阅我的编辑-使用子字符串。我认为这是你唯一的选择。
我很遗憾 substring 是唯一的选择，但是嘿，它有效 :)

【解决方案2】：

试试这个：

var errorText = $('<div />').append(jqXHR.responseText).html();

这是jsfiddle。

【讨论】：

这会将 responseText 包装到 dom 树并在其中找到 body。并将正文元素的内容分配给错误文本。很好的答案。
@Alien：它在$() 中包装了一个html 字符串，会将其解析为一个HTML DOM/DOMFragment。如果您在您的选项散列中使用dataType: 'html' 到$.ajax，这基本上就是所有发生的事情。然后将这个新片段作为上下文传递给从基本上只抓取body元素...
我已经试过了。出于某种原因，errorText 仍然为空：/ 我在问题中使用的那个和这个似乎都应该工作，但他们没有。
@Darin 你的代码和var errorText = jqXHR.responseText;是一样的
@Edgar 不正确。他正在构建一个新的 DOM 节点，将响应文本附加到其中（这会创建额外的节点——请参阅我的答案），然后获取它的 HTML 以剥离包装 <div> 标记。一个很好的解决方案，肯定基于我在下面的发现！ :)

【解决方案3】：

使用.filter()

http://api.jquery.com/filter/

var myHtml = '<div id="blah">hello world</div>';
console.log($(myHtml).filter('#blah').html());

这将在控制台中显示“hello world”。它是存储在变量中的 HTML。您将 jquery 中的 filter() 应用于该变量（见上文），即使它位于变量中，您也可以通过这种方式访问您的 dom。

【讨论】：

@AlexFord 请看上面的例子。你没有正确使用它。
我完全按照你的方式使用它，但它在我的实例中不起作用，因为 jQuery 在包装它时对 HTML 和 BODY 标签做了什么。

【解决方案4】：

假设你的 html 是有效的 xml 你可以这样做

var xmlDoc = $.parseXML( jqXHR.responseText ),
    body = $( xmlDoc ).find('body')[0],
    bodystring = body.xml || new XMLSerializer().serializeToString(body);

现在bodystring 拥有整个<body> 标记（作为字符串），您可以使用它将其附加到DOM 中

$('#mainContent').html( bodystring );

http://jsfiddle.net/gaby/hYukn/ 上的演示

【讨论】：