Создание объекта jQuery из большой HTML-строки
У меня есть большая строка HTML, содержащая несколько дочерних узлов.
Можно ли создать объект DOM jQuery с помощью этой строки?
Я пробовал $(string)
, но он возвращает массив, содержащий все отдельные узлы.
Imtrying для получения элемента, в который я могу использовать функцию .find().
Ответы
Ответ 1
Обновление:
Из 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
Ответ 2
Как и в 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 для отображения результата в div.
Ответ 3
var jQueryObject = $('<div></div>').html( string ).children();
Это создает фиктивный объект jQuery, в который вы можете поместить строку как HTML. Затем вы получаете только детей.
Ответ 4
Существует также большая библиотека под названием 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>
Ответ 5
Я использую следующие для своих 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
Ответ 6
причина, по которой $(string) не работает, заключается в том, что jquery не находит html-контент между $(). Поэтому вам нужно сначала разобрать его на html.
если у вас есть переменная, в которой вы проанализировали html. вы можете использовать $(string) и использовать все доступные функции для объекта