Tworzenie obiektu jQuery z dużego ciągu HTML


140

Mam duży ciąg HTML zawierający wiele węzłów potomnych.

Czy można zbudować obiekt jQuery DOM przy użyciu tego ciągu?

Próbowałem, $(string)ale zwraca tylko tablicę zawierającą wszystkie poszczególne węzły.

Próbuję uzyskać element, na którym mogę użyć funkcji .find ().


Gdzie jest HTML, co chcesz z nim skonstruować? Możesz zajrzeć do funkcji .find (): api.jquery.com/find
Control Freak

3
Obiekt jQuery to obiekt podobny do tablicy, zawierający wszystkie węzły. Czy możesz wyjaśnić, co próbujesz osiągnąć?
Frédéric Hamidi

Gdzie jest „ten ciąg”? jaki ciąg?
Viezevingertjes

Spójrz tutaj, myślę, że to jest to, czego chcesz stackoverflow.com/q/759887/474535
Bart s

Muszę przekazać element z jednego WebView do drugiego za pomocą ciągu, ciąg byłby po prostu źródłem HTML tego elementu. Myślę, że mogłem nie zrozumieć, czym jest obiekt jQuery.
user1033619

Odpowiedzi:


200

Aktualizacja:

Od jQuery 1.8 możemy użyć $ .parseHTML , który będzie parsował ciąg znaków HTML do tablicy węzłów DOM. na przykład:

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

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

PRÓBNY


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

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

PRÓBNY

Co się dzieje w tym kodzie:

  • $('<div/>')jest podróbką <div>, której nie ma w DOM
  • $('<div/>').html(string)dołącza się stringdo tego fałszywego <div>jak dzieci
  • .contents()pobiera elementy podrzędne tego fałszywego obiektu <div>jako obiekt jQuery

Jeśli chcesz .find()pracować, spróbuj tego:

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

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

PRÓBNY


1
@ user1033619 możesz również wykonać .find()operację, sprawdź demo
thecodeparadox

Ale co by było, gdybystring = '<input type="text" value="val" />'
fdrv

1
Jeśli możesz $("<div/>"), dlaczego nie możesz $(string)?
xr280xr

2
Przy bardziej złożonym HTML potrzebowałem usunąć .contents, aby to zadziałało. jsfiddle.net/h45y2L7v
Simon Hutchison

Nie chcesz robić $ (string), ponieważ potrzebujesz opakowującego div, aby uzyskać zawartość. Otrzymasz zawartość div, która będzie Twoim wejściem.
Michael Khalili

120

Od jQuery 1.8 możesz po prostu użyć parseHtml, aby utworzyć obiekt 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));

Stworzyłem JSFidle, który to demonstruje: http://jsfiddle.net/MCSyr/2/

Przetwarza dowolny ciąg HTML do obiektu jQuery i używa funkcji find do wyświetlenia wyniku w elemencie div.


10
Uważam, że ta odpowiedź jest znacznie lepsza, ponieważ nie musi ona używać elementu div-ducha. $ .parseHtml ftw.
ZeeCoder

2
Ta odpowiedź nie zadziałała, gdy chciałem wtedy użyć $ jQueryObject.find (), zakładam, że nie została dodana do domeny w tym momencie.
dougajmcdonald

@dougajmcdonald - find powinien działać bez dodawania treści do domeny. Jeśli spojrzysz na moje skrzypce ( jsfiddle.net/MCSyr/2 ), wywołuję find na obiekcie jQuery i zwraca on oczekiwany wynik: $ jQueryObject.find ("# theAnswer"). Html ()
kiprainey

1
@kiprainey interesujące, wykopię przykład, na którym mnie nie było, i zobaczę, czy jest coś jeszcze. Został napisany w module TypeScript wewnątrz obciążenia innej logiki, mógł to być inny problem! Przepraszam.
dougajmcdonald

8
Warto wspomnieć, że parseHTML został dodany w jQuery 1.8
Jean-Michel Garcia

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

Tworzy to fikcyjny obiekt jQuery, w którym można umieścić ciąg znaków w formacie HTML. Wtedy masz tylko dzieci.


2
Próbowałem tego, ale nie działa to z funkcją .find (), której muszę użyć później.
user1033619

3
@ user1033619 musisz użyć .filter()zamiast .find().
Kulbir Saini

2

Istnieje również wspaniała biblioteka o nazwie cheerio zaprojektowana specjalnie do tego celu.

Szybka, elastyczna i oszczędna implementacja rdzenia jQuery zaprojektowanego specjalnie dla serwera.

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

Używam następujących szablonów 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());

Uwaga: Zakładając, że używasz jQuery


1

powodem, dla którego $ (string) nie działa, jest to, że jquery nie znajduje treści html między $ (). Dlatego musisz najpierw przeanalizować go do html. gdy masz zmienną, w której przeanalizowałeś kod HTML. możesz wtedy użyć $ (string) i użyć wszystkich funkcji dostępnych na obiekcie

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.