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

问题描述 投票：0回答：9

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

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

我尝试过

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

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

javascript jquery html
9个回答
243
投票

更新：

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

演示

127
投票

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

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

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

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>
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

1
投票

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

0
投票

你可以尝试下面的方法

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

我知道这是一个旧线程，但我有另一个简单的答案。 jQuery 已经升级了很多版本，我现在使用的是 1.13.x

不是专业的 jQuery 程序员，我天真地使用过：

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

然后很快！它起作用了：

el
现在是一个完全可操作的 jQuery dom 元素。

过去几天我一直在测试它，它似乎按预期工作。

0
投票

为什么提示长度为0？

$(function(){   
 

var rrr=$('<html><body><div class="new">aaaa</div></body></html>');
    
alert(rrr.find('.new').length)  //return 0


})    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.