bestsource

큰 HTML 문자열로 jQuery 개체 만들기

bestsource 2023. 9. 26. 22:25
반응형

큰 HTML 문자열로 jQuery 개체 만들기

저는 여러 개의 자식 노드를 포함하는 큰 HTML 문자열을 가지고 있습니다.

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

노력했습니다.$(string)그러나 모든 개별 노드를 포함하는 배열만 반환합니다.

.find() 기능을 사용할 수 있는 요소를 구하려고 합니다.

업데이트:

jQuery 1.8부터 $.parse를 사용할 수 있습니다.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 개체가 생성됩니다. 그러면 자식만 얻을 수 있습니다.

이것을 위해 특별히 고안된 치리오라는 훌륭한 도서관도 있습니다.

서버 전용으로 설계된 핵심 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)을 사용하고 객체에서 사용 가능한 모든 함수를 사용할 수 있습니다.

당신은 아래와 같은 것을 시도할 수 있습니다.

$($.parseHTML(<<table html string variable here>>)).find("td:contains('<<some text to find>>')").first().prev().text();

이것이 오래된 스레드라는 것을 알고 있지만 간단한 답이 하나 더 있습니다. jQuery는 몇 가지 버전을 이동했고 저는 1.13.x에 있습니다.

전문 jQuery 프로그래머가 아닌 Ineagly는 다음을 사용했습니다.

var el = $( "#thecontainer" ).append( "<legit, lengthy html>" );

그리고 presto!효과가 있었습니다.el이제 완전히 작동하는 jQuerydom 요소입니다.

지난 며칠간 테스트를 해봤는데 예상대로 되는 것 같습니다.

언급URL : https://stackoverflow.com/questions/11047670/creating-a-jquery-object-from-a-big-html-string

반응형