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

Posted

技术标签:

【中文标题】使用 jQuery 在变量中而不是在当前 DOM 中选择内容?【英文标题】:Select content within a variable instead of within the current DOM with jQuery? 【发布时间】: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 标记的内容。 【参考方案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 以剥离包装 &lt;div&gt; 标记。一个很好的解决方案,肯定基于我在下面的发现! :)【参考方案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 拥有整个&lt;body&gt; 标记(作为字符串),您可以使用它将其附加到DOM 中

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

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

【讨论】:

以上是关于使用 jQuery 在变量中而不是在当前 DOM 中选择内容?的主要内容,如果未能解决你的问题,请参考以下文章

将数组传输到SQLite中,反之亦然,而无需循环,尤其是在ActionScript3中而不循环

使用jQuery替换查询字符串参数并放在地址栏中而不刷新

在模拟器中而不是在设备中更新位置

如何在片段中而不是在活动中使用 NavController(在片段中带有 NavHost)?

Jquery click 在 FIrefox 中注册,而不是在 IE 中

我想在详细信息页面中而不是在 AspNetCore Web 应用程序的索引页面中构建列