从大HTML字符串创建jQuery对象

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

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

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

试图获得一个我可以使用.find（）函数的元素。

更新：

从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() );

演示

从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中。

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

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

还有一个名为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>

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

本文地址：http://javascript.askforanswer.com/congdahtmlzifuchuanchuangjianjqueryduixiang.html
文章标签：html , javascript , jquery
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

更新：

这段代码中发生了什么：

如果您想.find()工作，请尝试以下操作：

文件下载

如果您想`.find()`工作，请尝试以下操作：