Створення об’єкта jQuery з великої HTML-рядки


140

У мене є великий HTML-рядок, що містить декілька дочірніх вузлів.

Чи можна побудувати об'єкт DQ jQuery за допомогою цього рядка?

Я спробував, $(string)але він повертає лише масив, що містить усі окремі вузли.

Імтрирую, щоб отримати елемент, у якому я можу використовувати функцію .find ().


Де HTML, що ви хочете побудувати з ним? Ви можете подивитися функцію .find (): api.jquery.com/find
— Control Freak

3
Об'єкт jQuery - це об'єкт, схожий на масив, що містить усі вузли. Чи можете ви детальніше зупинитися на тому, що ви намагаєтесь досягти?
— Фредерік Хаміді

Де "цей рядок"? яка струна?
— Viezevingertjes

Подивіться тут, я думаю, що це те, що ви хочете, stackoverflow.com/q/759887/474535
— bart s

Я повинен передати елемент з одного WebView в інший через рядок, рядок буде просто джерелом HTML цього елемента. Я думаю, що я, можливо, неправильно зрозумів, що таке об'єкт jQuery.
— user1033619

Відповіді:


200

Оновлення:

З jQuery 1.8 ми можемо використовувати $ .parseHTML , який буде аналізувати рядок HTML до масиву DOM-вузлів. наприклад:

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

Що відбувається в цьому коді:

  • $('<div/>')це підробка <div>, якої не існує в DOM
  • $('<div/>').html(string)додається stringв рамках цієї підробки <div>як діти
  • .contents()витягує дітей цього підробки <div>як об’єкт jQuery

Якщо ви хочете зробити .find()роботу, спробуйте:

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

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

DEMO


1
@ user1033619 Ви також можете виконати .find()операцію, перевірте демонстрацію
— thecodeparadox

Але як, якщоstring = '<input type="text" value="val" />'
— fdrv

1
Якщо ти вмієш $("<div/>"), чому не можеш $(string)?
— xr280xr

2
За допомогою більш складного HTML-коду мені потрібно було видалити .contents, щоб змусити це працювати. jsfiddle.net/h45y2L7v
— Саймон Хатчісон

Ви не хочете робити $ (string), оскільки для отримання вмісту потрібен обгортковий дів. Ви отримаєте вміст div, який стане вашим вкладом.
— Майкл Халілі

120

Станом на jQuery 1.8, ви можете просто використовувати parseHtml для створення об’єкта 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));

Я створив JSFidle, що демонструє це: http://jsfiddle.net/MCSyr/2/

Він аналізує довільний рядок HTML на об’єкт jQuery і використовує find для відображення результату у діві.


10
Я вважаю цю відповідь набагато кращою, оскільки для цього не потрібно використовувати елемент прикорму. $ .parseHtml ftw.
— ZeeCoder

2
Ця відповідь не спрацювала для мене, коли я тоді хотів перейти до $ jQueryObject.find (), я припускаю, тому що він не був доданий до дому в той момент.
— dougajmcdonald

@dougajmcdonald - пошук повинен працювати без додавання вмісту до дому. Якщо ви подивитесь на мою загадку ( jsfiddle.net/MCSyr/2 ), я закликаю знайти на об’єкт jQuery, і він повертає результат, як очікувалося: $ jQueryObject.find ("# theAnswer"). Html ()
— kiprainey

1
@kiprainey цікаво, я розкопаю той приклад, який він мені не зробив, і побачу, чи є ще щось на нозі. Це було написано всередині модуля TypeScript всередині іншої логіки, це могло бути іншою проблемою! Мої вибачення.
— dougajmcdonald

8
Варто згадати, що парсеHTML додано в jQuery 1.8
— Жан-Мішель Гарсія

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

Це створює фіктивний об’єкт jQuery, в який ви можете помістити рядок як HTML. Тоді ви отримуєте лише дітей.


2
я спробував це, але він не працює з функцією .find (), яку я повинен використовувати пізніше.
— користувач1033619

3
@ user1033619 ви повинні використовувати .filter()замість .find().
— Кульбір Саїні

2

Також є чудова бібліотека під назвою cheerio, створена спеціально для цього.

Швидка, гнучка та постійна реалізація основних jQuery, розроблених спеціально для сервера.

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

Я використовую наступне для своїх шаблонів 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());

Примітка. Припустимо, що ви використовуєте jQuery


1

Причина, по якій $ (string) не працює, полягає в тому, що jquery не знаходить вміст html між $ (). Тому вам потрібно спершу розібрати його в html. як тільки у вас є змінна, в якій ви проаналізували html. потім можна використовувати $ (string) та використовувати всі функції, доступні на об'єкті

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.