156

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

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

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

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

4

7 回答 7

226

更新：

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

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

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

演示

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

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

演示

这段代码发生了什么：

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

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

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

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

演示

于 2012-06-15T09:11:51.190 回答
123

从 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 中显示结果。

于 2013-05-31T14:29:53.993 回答
13 
var jQueryObject = $('<div></div>').html( string ).children();

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

于 2012-06-15T09:09:30.600 回答
2

还有一个很棒的库，叫做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>
于 2015-11-16T02:03:39.317 回答
2

我将以下内容用于我的 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

于 2016-11-30T13:29:00.090 回答
1

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

于 2017-05-03T23:26:39.783 回答
0

您可以尝试以下方法

$($.parseHTML(<<table html string variable here>>)).find("td:contains('<<some text to find>>')").first().prev().text();
于 2020-09-05T07:53:09.730 回答