Javascript 从一个大的 HTML 字符串创建一个 jQuery 对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11047670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a jQuery object from a big HTML-string
提问by user1033619
I have a big HTML-string containing multiple child-nodes.
我有一个包含多个子节点的大 HTML 字符串。
Is it possible to construct a jQueryDOM object using this string?
是否可以使用此字符串构造一个jQueryDOM 对象？
I've tried $(string)but it only returns an array containing all the individual nodes.
我试过了，$(string)但它只返回一个包含所有单个节点的数组。
Imtrying to get an element which i can use the .find() function on.
试图获取一个元素，我可以在其上使用 .find() 函数。
回答by thecodeparadox
Update:
更新：
From jQuery 1.8, we can use $.parseHTML, which will parse the HTML string to an array of DOM nodes. eg:
从 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();
What's happening in this code:
这段代码发生了什么：
$('<div/>')is a fake<div>that does not exist in the DOM$('<div/>').html(string)appendsstringwithin that fake<div>as children.contents()retrieves the children of that fake<div>as a jQuery object
$('<div/>')是<div>在 DOM 中不存在的假货$('<div/>').html(string)附加string在那个假<div>的孩子中.contents()检索该假货的子代<div>作为 jQuery 对象
If you want to make .find()work then try this:
如果你想.find()工作，那么试试这个：
var string = '<div><input type="text" value="val" /></div>',
object = $('<div/>').html(string).contents();
alert( object.find('input').val() );
回答by kiprainey
As of jQuery 1.8 you can just use parseHtml to create your jQuery object:
从 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));
I've created a JSFidle that demonstrates this: http://jsfiddle.net/MCSyr/2/
我创建了一个 JSFidle 来演示这一点：http: //jsfiddle.net/MCSyr/2/
It parses the arbitrary HTML string into a jQuery object, and uses find to display the result in a div.
它将任意 HTML 字符串解析为 jQuery 对象，并使用 find 将结果显示在 div 中。
回答by Florian Margaine
var jQueryObject = $('<div></div>').html( string ).children();
This creates a dummy jQuery object in which you can put the string as HTML. Then, you get the children only.
这将创建一个虚拟的 jQuery 对象，您可以将字符串作为 HTML 放入其中。然后，你只得到孩子。
回答by Loourr
There is also a great library called cheeriodesigned specifically for this.
还有一个很棒的库，叫做cheerio，专门为此设计的。
Fast, flexible, and lean implementation of core jQuery designed specifically for the server.
专为服务器设计的核心 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>
回答by Anthony
I use the following for my HTML templates:
我将以下内容用于我的 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());
Note: Assuming if you are using jQuery
注意：假设您使用的是 jQuery
回答by Chetan
the reason why $(string) is not working is because jquery is not finding html content between $(). Therefore you need to first parse it to html. once you have a variable in which you have parsed the html. you can then use $(string) and use all functions available on the object
$(string) 不起作用的原因是因为 jquery 没有在 $() 之间找到 html 内容。因此，您需要先将其解析为 html。一旦你有一个变量，你在其中解析了 html。然后您可以使用 $(string) 并使用对象上可用的所有函数
