web-dev-qa-db-fra.com

Création d'un objet jQuery à partir d'une grosse chaîne HTML

J'ai une grosse chaîne HTML contenant plusieurs nœuds enfants.

Est-il possible de construire un objet DOM jQuery en utilisant cette chaîne?

J'ai essayé $(string) mais il ne retourne qu'un tableau contenant tous les nœuds individuels.

Je cherche à obtenir un élément sur lequel je peux utiliser la fonction .find ().

javascriptjqueryhtml
125
user1033619

Mise à jour:

Depuis jQuery 1.8, nous pouvons utiliser $. ParseHTML , qui analysera la chaîne HTML dans un tableau de noeuds DOM. par exemple:

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

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

DÉMO

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

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

DÉMO

Que se passe-t-il dans ce code:

  • $('<div/>') est un faux <div> qui n'existe pas dans le DOM
  • $('<div/>').html(string) ajoute string à l'intérieur de ce faux <div> en tant qu'enfant
  • .contents() récupère les enfants de ce faux <div> en tant qu'objet jQuery

Si vous voulez que .find() fonctionne, essayez ceci:

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

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

DÉMO

185
thecodeparadox

A partir de jQuery 1.8, vous pouvez simplement utiliser parseHtml pour créer votre objet 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));

J'ai créé un JSFidle qui illustre ceci: http://jsfiddle.net/MCSyr/2/

Il analyse la chaîne HTML arbitraire dans un objet jQuery et utilise find pour afficher le résultat dans un div.

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

Cela crée un objet jQuery factice dans lequel vous pouvez placer la chaîne au format HTML. Ensuite, vous obtenez les enfants seulement.

12
Florian Margaine

Il existe également une grande bibliothèque appelée cheerio conçue spécialement pour cela.

Implémentation rapide, flexible et allégée du noyau jQuery conçu spécifiquement pour le serveur.

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>
2
Loourr

J'utilise les éléments suivants pour mes modèles 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());

Remarque: en supposant que vous utilisiez jQuery

1
Anthony

la raison pour laquelle $ (chaîne) ne fonctionne pas, c'est parce que jquery ne trouve pas de contenu HTML compris entre $ (). Par conséquent, vous devez d’abord l’analyser en HTML. une fois que vous avez une variable dans laquelle vous avez analysé le code HTML. vous pouvez ensuite utiliser $ (chaîne) et utiliser toutes les fonctions disponibles sur l'objet

1
Chetan