jQuery（）没有在jQuery.parseHTML（）结果中找到元素

我正在使用QUnit编写测试并使用$.ajax()从我在本地运行的开发站点获取一些测试的HTML：

 add_elements = function(location, selector) { $.ajax(location, {async: false}).done(function(data) { stor.$els = $(selector, $.parseHTML(data)); stor.$els.appendTo($('body')); }) } 

在某个位置使用此函数，我将以下data传递给我的.done()回调函数：

         
 
 
 Home Text 
 
 
 
 
 Text text text 
 
 More text! 
 
  Let's go  
 
 
 
         

如果selector是#hero-units或.hero-unit ，那么一切都有效，但如果selector是#app-container ，则$(selector, $.parseHTML(data))返回任何#app-container ！ 我想要一个div#app-container元素的jQuery对象。

以下是杀我的原因：

• $.parseHTML(data) 确实包含div#app-container元素。 它只是$.parseHTML(data)[7] 。
• 然而， $('#app-container', $.parseHTML(data))是一个空数组。
• $('div', $.parseHTML(data))包括div#app-container所有div ，但不包括div#app-container本身。

这里发生了什么？ 似乎正在发生的事情是$不会查看$.parseHTML(data)或$($.parseHTML(data)))返回的任何顶级元素，而只是他们的孩子。

如何从这个$.parseHTML(data)获取div#app-container的jQuery对象？

回答

$(selector, $.parseHTML(data))样式查找使用$.find 。 由于我正在寻找这个jQuery对象中的顶级元素，我应该使用$.filter 。 瞧。

Answer 1

您需要先创建一个DOM元素来附加.parseHTML()的结果，以便在jQuery遍历它并找到div#app-container之前创建一个DOM树。

 var tempDom = $('
').append($.parseHTML(str)); var appContainer = $('#app-container', tempDom); 

我用你的例子让它运作起来： http ： //jsfiddle.net/gEYgZ/

.parseHTML()函数似乎阻塞了标记，所以我不得不删除它们。

PS。 显然

不是真正的HTML标记，只是将它用于示例

Answer 2

你可以试试这个：

 $($.parseHTML('
hello
')).find('#foo'); 

对于以<开头的字符串，您可以将该代码简化为：

 $('
hello
').find('#foo'); 

Answer 3

刚碰到这个。

原来$.parseHTML返回一个vanilla元素的DOM元素，并且不支持你想要的jQuery find。

我认为这是将HTML字符串转换为jQuery对象的最简洁的解决方案：

 var html = '
hello
'; var $foo = $(html).find('#foo'); 

注意：你可能想在你的html字符串周围使用$.trim ，这样jQuery就不会被空格混淆。

Answer 4

它与html不属于DOM没有任何关系。 无论出于何种原因，无法找到解析后的HTML中的顶级标记。 如果您要查找的元素包含在另一个标记中，则查找将按预期工作。 顺便说一句，将元素包装在body标签中是行不通的，但我尝试过的所有其他元素都能正常工作。

 var bad = $.parseHTML('
<
/
two
'); console.log($(bad).find('li').length); //will be 2 console.log($(bad).find('ul').length); //will be 0 var good = $.parseHTML('
<
/
two
'); console.log($(good).find('li').length); //will be 2 console.log($(good).find('ul').length); //will be 1 

这是一个小提琴演示： http ： //jsfiddle.net/ndnnhf94/

Answer 5

我想你应该尝试这个：

 $('body', $.parseHTML(data)) 

Answer 6

我相信这会有效，特别是如果你特别需要通过id找到元素;

 function findInParsed(html, selector){ return $(selector, html).get(0) || $(html).filter(selector).get(0); } 

如果您需要该对象的jquery版本，那么您可以使用它

 function findInParsed(html, selector){ var check = $(selector, html).get(0); if(check) return $(check); check = $(html).filter(selector).get(0) return (check)? $(check) : false; }