큰 HTML 문자열에서 jQuery 객체 만들기

여러 자식 노드를 포함하는 큰 HTML 문자열이 있습니다.

이 문자열을 사용하여 jQuery DOM 객체 를 생성 할 수 있습니까?

시도 $(string)했지만 모든 개별 노드가 포함 된 배열 만 반환합니다.

.find () 함수를 사용할 수있는 요소를 얻으려고합니다.

최신 정보:

jQuery 1.8부터 $ .parseHTML을 사용 하면 HTML 문자열을 DOM 노드 배열로 구문 분석합니다. 예 :

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

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

데모

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

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

데모

이 코드에서 일어나는 일 :

• $('<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() );

데모

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에 표시합니다.

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

그러면 문자열을 HTML로 넣을 수있는 더미 jQuery 객체가 생성됩니다. 그런 다음 아이들 만 얻습니다.

이를 위해 특별히 설계된 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>

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를 사용하고 있다고 가정

$ (string)이 작동하지 않는 이유는 jquery가 $ () 사이에서 HTML 내용을 찾지 못하기 때문입니다. 따라서 먼저 html로 구문 분석해야합니다. HTML을 파싱 한 변수가 있으면 그런 다음 $ (string)을 사용하고 객체에서 사용 가능한 모든 기능을 사용할 수 있습니다