使用 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 以剥离包装 <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/ 上的演示
【讨论】:
以上是关于使用 jQuery 在变量中而不是在当前 DOM 中选择内容?的主要内容,如果未能解决你的问题,请参考以下文章
将数组传输到SQLite中,反之亦然,而无需循环,尤其是在ActionScript3中而不循环
如何在片段中而不是在活动中使用 NavController(在片段中带有 NavHost)?