Erstellen eines jQuery-Objekts aus einer großen HTML-Zeichenfolge

139

Ich habe eine große HTML-Zeichenfolge, die mehrere untergeordnete Knoten enthält.

Ist es möglich, mit dieser Zeichenfolge ein jQuery- DOM-Objekt zu erstellen?

Ich habe es versucht, $(string)aber es wird nur ein Array zurückgegeben, das alle einzelnen Knoten enthält.

Imtrying, um ein Element zu erhalten, für das ich die Funktion .find () verwenden kann.

javascript jquery html user1033619
quelle
Wo ist der HTML-Code, was möchten Sie damit erstellen? Vielleicht möchten Sie sich die Funktion .find () ansehen
Control Freak
3
Ein jQuery-Objekt ist ein Array-ähnliches Objekt, das alle Knoten enthält. Können Sie näher erläutern, was Sie erreichen möchten?
Frédéric Hamidi
Wo ist 'diese Zeichenfolge'? welche Saite?
Viezevingertjes
Werfen
bart s
Ich muss das Element über eine Zeichenfolge von einer WebView zu einer anderen übergeben. Die Zeichenfolge ist lediglich die HTML-Quelle dieses Elements. Ich glaube, ich habe möglicherweise falsch verstanden, was ein jQuery-Objekt ist.
user1033619

Antworten:

199

Aktualisieren:

Ab jQuery 1.8 können wir $ .parseHTML verwenden , mit dem die HTML-Zeichenfolge in ein Array von DOM-Knoten analysiert wird. z.B:

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

Was passiert in diesem Code:

  • $('<div/>')ist eine Fälschung <div>, die im DOM nicht existiert
  • $('<div/>').html(string)hängt stringinnerhalb dieser Fälschung <div>als Kinder
  • .contents()Ruft die <div>untergeordneten Elemente dieser Fälschung als jQuery-Objekt ab

Wenn Sie arbeiten möchten, .find()versuchen Sie Folgendes:

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

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

DEMO

thecodeparadox
quelle
1
@ user1033619 Sie können den .find()Vorgang auch ausführen , überprüfen Sie die Demo
thecodeparadox
Aber wie wäre es, wennstring = '<input type="text" value="val" />'
fdrv
1
Wenn du kannst $("<div/>"), warum kannst du das nicht $(string)?
xr280xr
2
Bei komplexerem HTML musste ich .contents entfernen, damit dies funktioniert. jsfiddle.net/h45y2L7v
Simon Hutchison
Sie möchten $ (string) nicht ausführen, da Sie ein Wrapping-Div benötigen, um den Inhalt von zu erhalten. Sie erhalten den Inhalt des div, der Ihre Eingabe sein wird.
Michael Khalili
120

Ab jQuery 1.8 können Sie einfach parseHtml verwenden, um Ihr jQuery-Objekt zu erstellen:

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

Ich habe ein JSFidle erstellt, das dies demonstriert: http://jsfiddle.net/MCSyr/2/

Es analysiert die beliebige HTML-Zeichenfolge in ein jQuery-Objekt und verwendet find, um das Ergebnis in einem div anzuzeigen.

kiprainey
quelle
10
Ich finde diese Antwort weitaus besser, da hierfür kein Ghost-Div-Element verwendet werden muss. $ .parseHtml ftw.
ZeeCoder
2
Diese Antwort hat bei mir nicht funktioniert, als ich dann zu $ ​​jQueryObject.find () wollte, nehme ich an, weil sie zu diesem Zeitpunkt nicht zum Dom hinzugefügt wurde.
Dougajmcdonald
@dougajmcdonald - find sollte funktionieren, ohne dass der Inhalt zum Dom hinzugefügt wird. Wenn Sie sich meine Geige ansehen ( jsfiddle.net/MCSyr/2 ), rufe ich find für das jQuery-Objekt auf und es wird erwartungsgemäß ein Ergebnis zurückgegeben: $ jQueryObject.find ("# theAnswer"). Html ()
Kiprainey
1
@kiprainey interessant, ich werde das Beispiel ausgraben, auf dem es für mich nicht war, und sehen, ob noch etwas im Gange ist. Es wurde in einem TypeScript-Modul in einer Menge anderer Logik geschrieben, könnte ein anderes Problem gewesen sein! Entschuldigen Sie.
Dougajmcdonald
8
Erwähnenswert ist, dass parseHTML in jQuery 1.8
Jean-Michel Garcia
12 
var jQueryObject = $('<div></div>').html( string ).children();

Dadurch wird ein Dummy-jQuery-Objekt erstellt, in das Sie die Zeichenfolge als HTML einfügen können. Dann bekommen Sie nur die Kinder.

Florian Margaine
quelle
2
Ich habe es versucht, aber es funktioniert nicht mit der .find () -Funktion, die ich später verwenden muss.
user1033619
3
@ user1033619 müssen Sie .filter()anstelle von verwenden .find().
Kulbir Saini
2

Es gibt auch eine großartige Bibliothek namens Cheerio, die speziell dafür entwickelt wurde.

Schnelle, flexible und schlanke Implementierung von Core-jQuery, das speziell für den Server entwickelt wurde.

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

Ich verwende Folgendes für meine HTML-Vorlagen:

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

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

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

Hinweis: Angenommen, Sie verwenden jQuery

Anthony
quelle
1

Der Grund, warum $ (string) nicht funktioniert, ist, dass jquery keinen HTML-Inhalt zwischen $ () findet. Daher müssen Sie es zuerst in HTML analysieren. Sobald Sie eine Variable haben, in der Sie das HTML analysiert haben. Sie können dann $ (Zeichenfolge) verwenden und alle für das Objekt verfügbaren Funktionen verwenden

Chetan
quelle