Crear un objeto jQuery a partir de una gran cadena HTML

140

Tengo una gran cadena HTML que contiene múltiples nodos secundarios.

¿Es posible construir un objeto DOM jQuery usando esta cadena?

Lo intenté $(string)pero solo devuelve una matriz que contiene todos los nodos individuales.

Intentando obtener un elemento en el que pueda usar la función .find ().

javascript jquery html usuario1033619
fuente
¿Dónde está el HTML, qué quieres construir con él? Es posible que desee ver la función .find (): api.jquery.com/find
Control Freak
3
Un objeto jQuery es un objeto tipo matriz que contiene todos los nodos. ¿Puedes dar más detalles sobre lo que estás tratando de lograr?
Frédéric Hamidi
¿Dónde está 'esta cadena'? que cuerda
Viezevingertjes
Echa un vistazo aquí, creo que es lo que quieres stackoverflow.com/q/759887/474535
bart s
Tengo que pasar el elemento de un WebView a otro a través de una cadena, la cadena solo sería la fuente HTML de ese elemento. Creo que podría haber entendido mal lo que es un objeto jQuery.
user1033619

Respuestas:

200

Actualizar:

Desde jQuery 1.8, podemos usar $ .parseHTML , que analizará la cadena HTML a una matriz de nodos DOM. p.ej:

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

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

MANIFESTACIÓN

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

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

MANIFESTACIÓN

¿Qué está pasando en este código?

  • $('<div/>')es una falsificación <div>que no existe en el DOM
  • $('<div/>').html(string)se agrega stringdentro de esa falsificación <div>como niños
  • .contents()recupera a los hijos de esa falsificación <div>como un objeto jQuery

Si quieres .find()trabajar, prueba esto:

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

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

MANIFESTACIÓN

thecodeparadox
fuente
1
@ user1033619 también puede realizar .find()operaciones, verifique la demostración
thecodeparadox
Pero como sistring = '<input type="text" value="val" />'
fdrv
1
Si puedes hacerlo $("<div/>"), ¿por qué no puedes hacerlo $(string)?
xr280xr
2
Con HTML más complejo, necesitaba eliminar .contents para que esto funcionara. jsfiddle.net/h45y2L7v
Simon Hutchison
No desea hacer $ (cadena) porque necesita un div de ajuste para obtener el contenido de. Obtendrá el contenido del div, que será su entrada.
Michael Khalili
120

A partir de jQuery 1.8, puede usar parseHtml para crear su objeto 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));

He creado un JSFidle que demuestra esto: http://jsfiddle.net/MCSyr/2/

Analiza la cadena HTML arbitraria en un objeto jQuery, y utiliza find para mostrar el resultado en un div.

kiprainey
fuente
10
Encuentro esta respuesta mucho mejor, ya que esto no tiene que usar un elemento div fantasma. $ .parseHtml ftw.
ZeeCoder
2
Esta respuesta no funcionó para mí cuando quería entonces $ jQueryObject.find (), supongo porque no se agregó a la dom en ese momento.
dougajmcdonald
@dougajmcdonald - find debería funcionar sin que el contenido se agregue al dom. Si echa un vistazo a mi violín ( jsfiddle.net/MCSyr/2 ), estoy llamando a find en el objeto jQuery, y devuelve un resultado como se esperaba: $ jQueryObject.find ("# theAnswer"). Html ()
kiprainey
1
@kiprainey interesante, buscaré el ejemplo que no me sirvió y veré si había algo más en marcha. Fue escrito dentro de un módulo TypeScript dentro de una carga de otra lógica, ¡podría haber sido un problema diferente! Mis disculpas.
dougajmcdonald
8
Vale la pena mencionar que parseHTML se agregó en jQuery 1.8
Jean-Michel Garcia el
12 
var jQueryObject = $('<div></div>').html( string ).children();

Esto crea un objeto ficticio jQuery en el que puede colocar la cadena como HTML. Entonces, solo tienes a los niños.

Florian Margaine
fuente
2
He intentado esto, pero no funciona con la función .find () que tengo que usar más tarde.
user1033619
3
@ user1033619 tienes que usar en .filter()lugar de .find().
Kulbir Saini
2

También hay una gran biblioteca llamada cheerio diseñada específicamente para esto.

Implementación rápida, flexible y eficiente de Core jQuery diseñado específicamente para el servidor.

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
fuente
1

Utilizo lo siguiente para mis plantillas 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: Suponiendo si está utilizando jQuery

Antonio
fuente
1

la razón por la cual $ (string) no funciona es porque jquery no encuentra contenido html entre $ (). Por lo tanto, primero debe analizarlo en html. una vez que tenga una variable en la que haya analizado el html. entonces puede usar $ (cadena) y usar todas las funciones disponibles en el objeto

Chetan
fuente