Membuat objek jQuery dari string HTML-besar

140

Saya memiliki string HTML besar yang berisi banyak node anak.

Apakah mungkin untuk membangun jQuery objek DOM menggunakan string ini?

Saya sudah mencoba $(string) tetapi hanya mengembalikan array yang berisi semua node individual.

Mencoba untuk mendapatkan elemen yang bisa saya gunakan fungsi .find () di.

javascript jquery html

— pengguna1033619
sumber

Di mana HTML, apa yang ingin Anda buat dengan itu? Anda mungkin ingin melihat fungsi .find (): api.jquery.com/find

— Control Freak

3

Objek jQuery adalah objek mirip array yang berisi semua node. Bisakah Anda menguraikan apa yang ingin Anda capai?

— Frédéric Hamidi

Di mana 'string ini'? string apa?

— Viezevingertjes

Coba lihat di sini, saya pikir itu yang Anda inginkan stackoverflow.com/q/759887/474535

— bart s

Saya harus meneruskan elemen dari satu WebView ke yang lain melalui string, string hanya akan menjadi sumber HTML dari elemen itu. Saya pikir saya mungkin salah paham tentang objek jQuery.

— user1033619

200

Memperbarui:

Dari jQuery 1.8, kita bisa menggunakan $ .parseHTML , yang akan mem-parsing string HTML ke array node DOM. misalnya:

var dom_nodes = $($.parseHTML('<div><input type="text" value="val" /></div>'));

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

DEMO

var string = '<div><input type="text" value="val" /></div>';

$('<div/>').html(string).contents();

DEMO

Apa yang terjadi dalam kode ini:

$('<div/>')adalah palsu <div>yang tidak ada di DOM
$('<div/>').html(string)menambahkan stringdalam palsu itu <div>sebagai anak-anak
.contents()mengambil anak-anak palsu itu <div>sebagai objek jQuery

Jika Anda ingin `.find()`bekerja maka coba ini:

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

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

DEMO

— theodeparadox
sumber

1

@ user1033619 Anda dapat melakukan .find()operasi juga, periksa demo

— thecodeparadox

Tetapi bagaimana jikastring = '<input type="text" value="val" />'

— fdrv

1

Jika Anda bisa melakukannya $("<div/>"), mengapa Anda tidak bisa melakukannya $(string)?

— xr280xr

2

Dengan HTML yang lebih kompleks, saya perlu menghapus .contents agar ini berfungsi. jsfiddle.net/h45y2L7v

— Simon Hutchison

Anda tidak ingin melakukan $ (string) karena Anda memerlukan div pembungkus untuk mendapatkan konten. Anda akan mendapatkan konten div, yang akan menjadi masukan Anda.

— Michael Khalili

120

Pada jQuery 1.8 Anda bisa menggunakan parseHtml untuk membuat objek jQuery Anda:

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

Saya telah membuat JSFidle yang menunjukkan ini: http://jsfiddle.net/MCSyr/2/

Ini mem-parsing string HTML yang berubah-ubah menjadi objek jQuery, dan menggunakan find untuk menampilkan hasilnya dalam div.

— Kiprainey
sumber

10

Saya menemukan jawaban ini jauh lebih baik, karena ini tidak harus menggunakan elemen ghost div. $ .parseHtml ftw.

— ZeeCoder

2

Jawaban ini tidak berfungsi untuk saya ketika saya ingin kemudian ke $ jQueryObject.find (), saya kira karena itu tidak ditambahkan ke dom pada saat itu.

— dougajmcdonald

@dougajmcdonald - find harus berfungsi tanpa konten yang ditambahkan ke dom. Jika Anda melihat biola saya ( jsfiddle.net/MCSyr/2 ), saya memanggil find pada objek jQuery, dan mengembalikan hasilnya seperti yang diharapkan: $ jQueryObject.find ("# theAnswer"). Html ()

— kiprainey

1

@ siprainey menarik, saya akan menggali contoh itu tidak untuk saya dan melihat apakah ada sesuatu yang sedang terjadi. Itu ditulis di dalam modul TypeScript di dalam beban logika lain, bisa jadi masalah yang berbeda! Permintaan maaf saya.

— dougajmcdonald

8

Patut disebutkan bahwa parseHTML ditambahkan dalam jQuery 1.8

— Jean-Michel Garcia

12

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

Ini menciptakan objek jQuery dummy di mana Anda bisa meletakkan string sebagai HTML. Kemudian, Anda mendapatkan anak-anak saja.

— Florian Margaine
sumber

2

Saya sudah mencoba ini, tetapi tidak berfungsi dengan fungsi .find () yang harus saya gunakan nanti.

— user1033619

3

@ user1033619 Anda harus menggunakannya .filter()sebagai ganti .find().

— Kulbir Saini

2

Ada juga perpustakaan hebat bernama cheerio yang dirancang khusus untuk ini.

Implementasi inti jQuery cepat, fleksibel, dan ramping yang dirancang khusus untuk server.

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>

— Loourr
sumber

1

Saya menggunakan yang berikut ini untuk templat HTML saya:

$(".main").empty();

var _template = '<p id="myelement">Your HTML Code</p>';
var template = $.parseHTML(_template);
var final = $(template).find("#myelement");

$(".main").append(final.html());

Catatan: Dengan asumsi jika Anda menggunakan jQuery

— Anthony
sumber

1

alasan mengapa $ (string) tidak berfungsi adalah karena jquery tidak menemukan konten html antara $ (). Karena itu Anda harus menguraikannya terlebih dahulu ke html. setelah Anda memiliki variabel di mana Anda telah menguraikan html. Anda kemudian dapat menggunakan $ (string) dan menggunakan semua fungsi yang tersedia pada objek

— Chetan
sumber

Membuat objek jQuery dari string HTML-besar

Memperbarui:

Apa yang terjadi dalam kode ini:

Jika Anda ingin .find()bekerja maka coba ini:

Jika Anda ingin `.find()`bekerja maka coba ini: