从一个大的 HTML 字符串创建一个 jQuery 对象答案

【问题标题】：Creating a jQuery object from a big HTML-string从一个大的 HTML 字符串创建一个 jQuery 对象
【发布时间】：2012-06-15 09:07:03
【问题描述】：

我有一个包含多个子节点的大 HTML 字符串。

是否可以使用这个字符串构造一个 jQuery DOM 对象？

我试过$(string)，但它只返回一个包含所有单个节点的数组。

我正在尝试获取一个我可以使用 .find() 函数的元素。

【问题讨论】：

HTML 在哪里，你想用它构造什么？你可能想看看 .find() 函数：api.jquery.com/find
一个jQuery对象是一个包含所有节点的类数组对象。你能详细说明你想要实现的目标吗？
“这个字符串”在哪里？什么字符串？
看这里，我想这就是你想要的stackoverflow.com/q/759887/474535
我必须通过字符串将元素从一个 WebView 传递到另一个 WebView，该字符串只是该元素的 HTML 源。我想我可能误解了 jQuery 对象是什么。

标签： javascript jquery html

【解决方案1】：

更新：

从 jQuery 1.8 开始，我们可以使用$.parseHTML，它将 HTML 字符串解析为 DOM 节点数组。例如：

var dom_nodes = $($.parseHTML('<div><input type="text" value="val" /></div>'));

alert( dom_nodes.find('input').val() );

DEMO

var string = '<div><input type="text" value="val" /></div>';

$('<div/>').html(string).contents();

DEMO

这段代码发生了什么：

$('<div/>') 是一个假的 <div>，在 DOM 中不存在
$('<div/>').html(string) 在那个假的<div> 中附加string 作为孩子
.contents() 检索那个假的 <div> 的孩子作为一个 jQuery 对象

如果你想让`.find()` 工作，那么试试这个：

var string = '<div><input type="text" value="val" /></div>',
    object = $('<div/>').html(string).contents();

alert( object.find('input').val() );

DEMO

【讨论】：

@user1033619 你也可以执行.find()操作，查看demo
但是如果string = '<input type="text" value="val" />'
如果你能做到$("<div/>")，为什么你不能做到$(string)？
对于更复杂的 HTML，我需要删除 .contents 才能使其正常工作。 jsfiddle.net/h45y2L7v
你不想做 $(string) 因为你需要一个包装 div 来获取内容。您将获得 div 的内容，这将是您的输入。

【解决方案2】：

从 jQuery 1.8 开始，您可以只使用 parseHtml 来创建您的 jQuery 对象：

var myString = "<div>Some stuff<div>Some more stuff<span id='theAnswer'>The stuff I am looking for</span></div></div>";
var $jQueryObject = $($.parseHTML(myString));

我创建了一个 JSFidle 来演示这一点：http://jsfiddle.net/MCSyr/2/

它将任意的 HTML 字符串解析为一个 jQuery 对象，并使用 find 将结果显示在一个 div 中。

【讨论】：

我发现这个答案要好得多，因为它不必使用幽灵 div 元素。 $.parseHtml ftw.
这个答案对我不起作用，当时我想要然后到 $jQueryObject.find()，我想是因为它当时没有添加到 dom 中。
@dougajmcdonald -- find 应该可以在没有将内容添加到 dom 的情况下工作。如果你看看我的小提琴 (jsfiddle.net/MCSyr/2)，我在 jQuery 对象上调用 find，它会按预期返回结果：$jQueryObject.find("#theAnswer").html()
@kiprainey 很有趣，我会挖掘出它不适合我的示例，看看是否还有其他事情正在进行中。它是在加载其他逻辑的 TypeScript 模块中编写的，很可能是另一个问题！我很抱歉。
值得一提的是 jQuery 1.8 中添加了 parseHTML

【解决方案3】：

var jQueryObject = $('<div></div>').html( string ).children();

这将创建一个虚拟 jQuery 对象，您可以将字符串作为 HTML 放入其中。然后，你只得到孩子。

【讨论】：

我试过这个，但它不适用于我以后必须使用的 .find() 函数。
@user1033619 你必须使用.filter() 而不是.find()。

【解决方案4】：

还有一个很棒的库，名为 cheerio 专门为此设计的。

专为服务器设计的核心 jQuery 的快速、灵活和精简的实现。

var cheerio = require('cheerio'),
    $ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');
$('h2').addClass('welcome');

$.html();
//=> <h2 class="title welcome">Hello there!</h2>

【讨论】：

【解决方案5】：

我将以下内容用于我的 HTML 模板：

$(".main").empty();

var _template = '<p id="myelement">Your HTML Code</p>';
var template = $.parseHTML(_template);
var final = $(template).find("#myelement");

$(".main").append(final.html());

注意：假设您使用的是 jQuery

【讨论】：

【解决方案6】：

$(string) 不起作用的原因是 jquery 没有找到 $() 之间的 html 内容。因此，您需要先将其解析为 html。一旦你有一个变量，你已经在其中解析了 html。然后你可以使用 $(string) 并使用对象上所有可用的函数

【讨论】：

【解决方案7】：

你可以试试下面的方法

$($.parseHTML(<<table html string variable here>>)).find("td:contains('<<some text to find>>')").first().prev().text();

【讨论】：

更新：

这段代码发生了什么：

如果你想让.find() 工作，那么试试这个：

如果你想让`.find()` 工作，那么试试这个：