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.