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

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

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

Aktualisieren:

Was passiert in diesem Code:

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

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