Question

我想将一个html字符串解析为jQuery对象，然后按ID找到一个元素。

我尝试了3种方法，但只有最后的方法。我不知道为什么其他人不起作用？

var html = "<html><body><div id='main'></div></body></html>";

// Not work, return 0
console.log($(html).find('#main').length); 
// Not work, return 0
console.log($($.parseHTML(html)).find('#main').length); 
// Works, return 1
console.log($("<html/>").html(html).find('#main').length);

以下是示例： http://jsfiddle.net/nbyofkam/2/

Answer 1

这是documented：

传递复杂的HTML时，某些浏览器可能无法生成完全复制所提供的HTML源的DOM。如上所述，jQuery使用浏览器的.innerHTML属性来解析传递的HTML并将其插入到当前文档中。在此过程中，某些浏览器会过滤掉某些元素，例如<html>，<title>或<head>元素。因此，插入的元素可能无法代表传递的原始字符串。

因此，$(html)缩减为"<div id="main"></div>"。您可以通过记录$(html)[0].outerHTML。

来验证这一点

所以你不能在没有包装的情况下使用find，这就是你所做的。

Answer 2

另一种方法 -

var myTestDiv = document.createElement('div');
var mystr = '<div id="main"></div>';
myTestDiv.innerHTML = mystr;

console.log(myTestDiv.querySelector('div#main'));

正确的方法将html解析为jQuery对象

2 个答案: