การสร้างวัตถุ jQuery จาก HTML-string ขนาดใหญ่

ฉันมีสตริง 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 และใช้ค้นหาเพื่อแสดงผลใน div

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

สิ่งนี้จะสร้างวัตถุ jQuery ซึ่งคุณสามารถใส่สตริงเป็น HTML ได้ จากนั้นคุณจะได้รับเด็ก ๆ เท่านั้น

นอกจากนี้ยังมีห้องสมุดที่ยอดเยี่ยมที่ชื่อว่าcheerio ที่ออกแบบมาโดยเฉพาะสำหรับสิ่งนี้

การปรับใช้ core 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

สาเหตุที่ $ (สตริง) ไม่ทำงานเป็นเพราะ jquery ไม่ค้นหาเนื้อหา html ระหว่าง $ () ดังนั้นคุณต้องแยกวิเคราะห์มันเป็น html ก่อน เมื่อคุณมีตัวแปรที่คุณแยกวิเคราะห์ html จากนั้นคุณสามารถใช้ $ (สตริง) และใช้ฟังก์ชั่นทั้งหมดที่มีอยู่บนวัตถุ