Creazione di un oggetto jQuery da una grande stringa HTML


140

Ho una grande stringa HTML contenente più nodi figlio.

È possibile costruire un oggetto DOM jQuery usando questa stringa?

Ho provato, $(string)ma restituisce solo un array contenente tutti i singoli nodi.

Implorando di ottenere un elemento su cui posso usare la funzione .find ().


Dov'è l'HTML, cosa vuoi costruire con esso? Potresti voler guardare la funzione .find (): api.jquery.com/find
Control Freak

3
Un oggetto jQuery è un oggetto simile a un array che contiene tutti i nodi. Puoi approfondire ciò che stai cercando di ottenere?
Frédéric Hamidi,

Dov'è "questa stringa"? quale stringa?
Viezevingertjes,

Dai un'occhiata qui, penso che sia quello che vuoi stackoverflow.com/q/759887/474535
bart s

Devo passare l'elemento da un WebView all'altro attraverso una stringa, la stringa sarebbe solo la fonte HTML di quell'elemento. Penso che avrei potuto fraintendere cos'è un oggetto jQuery.
user1033619

Risposte:


200

Aggiornare:

Da jQuery 1.8, possiamo usare $ .parseHTML , che analizzerà la stringa HTML in una matrice di nodi DOM. per esempio:

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

Cosa sta succedendo in questo codice:

  • $('<div/>')è un falso <div>che non esiste nel DOM
  • $('<div/>').html(string)si aggiunge stringa quel falso <div>da bambini
  • .contents()recupera i figli di quel falso <div>come oggetto jQuery

Se vuoi far .find()funzionare, prova questo:

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

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

DEMO


1
@ user1033619 puoi anche eseguire l' .find()operazione, controlla la demo
thecodeparadox

Ma come sestring = '<input type="text" value="val" />'
fdrv il

1
Se puoi farlo $("<div/>"), perché non puoi farlo $(string)?
xr280xr,

2
Con HTML più complesso avevo bisogno di rimuovere .contents per farlo funzionare. jsfiddle.net/h45y2L7v
Simon Hutchison il

Non vuoi fare $ (stringa) perché hai bisogno di un div wrapping per ottenere il contenuto di. Otterrai il contenuto del div, che sarà il tuo contributo.
Michael Khalili,

120

A partire da jQuery 1.8 puoi semplicemente usare parseHtml per creare il tuo oggetto 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));

Ho creato un JSFidle che lo dimostra: http://jsfiddle.net/MCSyr/2/

Analizza la stringa HTML arbitraria in un oggetto jQuery e utilizza find per visualizzare il risultato in un div.


10
Trovo questa risposta molto migliore, dal momento che questo non deve usare un elemento div fantasma. $ .parseHtml ftw.
ZeeCoder,

2
Questa risposta non ha funzionato per me quando volevo allora su $ jQueryObject.find (), presumo perché non è stato aggiunto al dom a quel punto.
dougajmcdonald,

@dougajmcdonald - find dovrebbe funzionare senza che il contenuto venga aggiunto alla dom. Se dai un'occhiata al mio violino ( jsfiddle.net/MCSyr/2 ), chiamo find sull'oggetto jQuery e restituisce un risultato come previsto: $ jQueryObject.find ("# theAnswer"). Html ()
Kiprainey,

1
@kiprainey interessante, scoprirò l'esempio che non ha fatto per me e vedrò se ci fosse qualcos'altro in corso. È stato scritto all'interno di un modulo TypeScript all'interno di un carico di altra logica, avrebbe potuto benissimo essere un problema diverso! Mie scuse.
dougajmcdonald,

8
Vale la pena ricordare che parseHTML è stato aggiunto in jQuery 1.8
Jean-Michel Garcia il

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

Ciò crea un oggetto jQuery fittizio in cui è possibile inserire la stringa come HTML. Quindi prendi solo i bambini.


2
Ho provato questo, ma non funziona con la funzione .find () che devo usare in seguito.
user1033619

3
@ user1033619 devi usare .filter()invece di .find().
Kulbir Saini,

2

C'è anche una grande biblioteca chiamata cheerio progettata appositamente per questo.

Implementazione veloce, flessibile e snella di core jQuery progettata appositamente per il 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>

1

Uso i seguenti per i miei modelli 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());

Nota: supponendo che si stia utilizzando jQuery


1

il motivo per cui $ (stringa) non funziona è perché jquery non trova contenuto html tra $ (). Pertanto è necessario prima analizzarlo in HTML. una volta che hai una variabile in cui hai analizzato l'html. è quindi possibile utilizzare $ (stringa) e utilizzare tutte le funzioni disponibili sull'oggetto

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.