किसी बड़े HTML-string से jQuery ऑब्जेक्ट बनाना


140

मेरे पास एक बड़ा HTML-string है जिसमें कई चाइल्ड-नोड्स हैं।

क्या इस स्ट्रिंग का उपयोग करके jQuery DOM ऑब्जेक्ट का निर्माण संभव है ?

मैंने कोशिश की है, $(string)लेकिन यह केवल एक सरणी देता है जिसमें सभी व्यक्तिगत नोड होते हैं।

एक तत्व प्राप्त करने के लिए Imtrying जिस पर मैं .find () फ़ंक्शन का उपयोग कर सकता हूं।


HTML कहां है, आप इसके साथ क्या निर्माण करना चाहते हैं? आप .find () फ़ंक्शन को देखना चाहते हैं: api.jquery.com/find
नियंत्रण फ्रीक

3
एक jQuery वस्तु है एक सरणी की तरह युक्त वस्तु सभी नोड्स। क्या आप इसे हासिल करने की कोशिश कर रहे हैं?
Frédéric Hamidi

'यह तार ’कहाँ है? क्या स्ट्रिंग?
वीज़ेन्गेरिंगजेस

यहाँ एक नज़र डालें, मुझे लगता है कि यह वही है जो आप चाहते हैं 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() );

डेमो


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() );

डेमो


1
@ user1033619 आप .find()ऑपरेशन भी कर सकते हैं , डेमो की जांच करें
thecodeparadox

लेकिन अगर कैसेstring = '<input type="text" value="val" />'
fdrv

1
यदि आप कर सकते हैं $("<div/>"), तो आप क्यों नहीं कर सकते $(string)?
xr280xr

2
अधिक जटिल HTML के साथ मुझे इसे काम करने के लिए .contents को हटाने की आवश्यकता है। jsfiddle.net/h45y2L7v
साइमन हचिसन

आप $ (स्ट्रिंग) नहीं करना चाहते हैं क्योंकि आपको सामग्री प्राप्त करने के लिए रैपिंग डिव की आवश्यकता है। आपको div की सामग्री मिल जाएगी, जो आपका इनपुट होगा।
माइकल खलीली

120

1.8 jQuery के रूप में आप बस अपने jQuery वस्तु बनाने के लिए parseHtml का उपयोग कर सकते हैं:

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 ऑब्जेक्ट में पार्स करता है, और परिणाम को डिव में प्रदर्शित करने के लिए खोज का उपयोग करता है।


10
मुझे यह उत्तर बहुत अच्छा लगता है, क्योंकि इसमें भूतों के तत्व का उपयोग नहीं होता है। $ .parseHtml ftw।
ZeeCoder 28'13

2
यह जवाब मेरे लिए तब काम नहीं करता था जब मैं तब jQueryObject.find () पर चाहता था, मैं मानता हूं क्योंकि यह उस बिंदु पर डोम में नहीं जोड़ा गया था।
dougajmcdonald

@dougajmcdonald - पाते हैं कि सामग्री को डोम में जोड़े बिना काम करना चाहिए। यदि आप मेरे फिडेल ( jsfiddle.net/MCSyr/2 ) पर एक नज़र डालते हैं , तो मैं jQuery ऑब्जेक्ट पर कॉल कर रहा हूं, और यह अपेक्षित रूप से परिणाम देता है: $ jQueryObject.find ("# theAnswer" "html) ()।
किपेरनेई

1
@kiprainey दिलचस्प है, मैं उस उदाहरण को खोदूंगा जो मेरे लिए नहीं था और देखें कि क्या कुछ और था। यह अन्य तर्क के भार के अंदर टाइपस्क्रिप्ट मॉड्यूल के अंदर लिखा गया था, अच्छी तरह से एक अलग मुद्दा हो सकता था! मैं क्षमाप्रार्थी हूं।
dougajmcdonald

8
उल्लेख है कि parseHTML को jQuery 1.8
जीन-मिशेल गार्सिया

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

यह एक डमी jQuery ऑब्जेक्ट बनाता है जिसमें आप स्ट्रिंग को HTML के रूप में रख सकते हैं। फिर, तुम बच्चों को ही मिलता है।


2
ive ने यह कोशिश की, लेकिन यह .find () फ़ंक्शन के साथ काम नहीं करता है जिसे मुझे बाद में उपयोग करना होगा।
user1033619

3
@ user1033619 आपको .filter()इसके बजाय उपयोग करने के लिए मिला .find()
कुलबीर सैनी

2

इसके लिए विशेष रूप से तैयार किए गए चीयरियो नामक एक महान पुस्तकालय भी है ।

विशेष रूप से सर्वर के लिए डिज़ाइन किया गया कोर 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

कारण है कि $ (स्ट्रिंग) काम नहीं कर रहा है क्योंकि jquery को $ () के बीच html सामग्री नहीं मिल रही है। इसलिए आपको सबसे पहले इसे html से पार्स करना होगा। एक बार आपके पास एक चर है जिसमें आपने html को पार्स किया है। तब आप $ (स्ट्रिंग) का उपयोग कर सकते हैं और ऑब्जेक्ट पर उपलब्ध सभी फ़ंक्शन का उपयोग कर सकते हैं

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.