從一個大的 HTML 字符串創建一個 jQuery 對象

Question

我有一個包含多個子節點的大 HTML 字符串。

是否可以使用此字符串構造一個jQuery DOM 對象？

我試過$(string)但它只返回一個包含所有單個節點的數組。

試圖獲取一個元素，我可以在其上使用 .find() 函數。

Answer 1

更新：

從 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()將那個假<div>的子.contents()作為一個 jQuery 對象進行檢索

如果你想讓.find()工作，那么試試這個：

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

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

演示

Answer 2

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

Answer 3

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

這將創建一個虛擬的 jQuery 對象，您可以將字符串作為 HTML 放入其中。 然后，你只得到孩子。

Answer 4

還有一個很棒的庫，叫做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>

Answer 5

我將以下內容用於我的 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

Answer 6

$(string) 不起作用的原因是因為 jquery 沒有在 $() 之間找到 html 內容。 因此，您需要先將其解析為 html。 一旦你有一個變量，你在其中解析了 html。 然后您可以使用 $(string) 並使用對象上可用的所有函數

Answer 7

您可以嘗試以下操作

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