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

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

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

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

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

166525 次浏览
小开 
var jQueryObject = $('<div></div>').html( string ).children();

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

小开
最佳答案

更新:

从 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/>')是在 DOM 中不存在的假 <div>
  • $('<div/>').html(string)将 string附加到假的 <div>中，就像孩子一样
  • .contents()以 jQuery 对象的形式检索假 <div>的子对象

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

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


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

演示

小开

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

小开

还有一个专门为此设计的名为 再见的库。

专门为服务器设计的核心 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>
小开

我使用下面的 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

小开

$(string)无法工作的原因是 jquery 没有在 $()之间查找 html 内容。因此，您需要首先将其解析为 html。 一旦有了解析 html 的变量。然后可以使用 $(string)并使用对象上可用的所有函数

小开

你可以试试下面的方法

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

我知道这是一个老线索，但我有另一个简单的答案。JQuery 已经升级了好几个版本，我现在是1.13版本。X

我不是一个专业的 jQuery 程序员，我天真地使用:

var el = $( "#thecontainer" ).append( "<legit, lengthy html>" );

很快，它成功了: el现在是一个完全可操作的 jQuerydom 元素。

过去几天我一直在测试它，它似乎像预期的那样工作。


提交答案