从大HTML字符串创建jQuery对象

2020/11/17 08:42 · javascript ·  · 0评论

我有一个包含多个子节点的大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
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!