आप jQuery ऑब्जेक्ट को स्ट्रिंग में कैसे परिवर्तित करते हैं?


405

आप jQuery ऑब्जेक्ट को स्ट्रिंग में कैसे परिवर्तित करते हैं?

जवाबों:


602

मुझे लगता है कि आप पूर्ण HTML स्ट्रिंग के लिए पूछ रहे हैं। अगर ऐसा है, तो कुछ इस तरह से किया जाएगा:

$('<div>').append($('#item-of-interest').clone()).html(); 

यह यहां और अधिक गहराई से समझाया गया है , लेकिन अनिवार्य रूप से आप ब्याज की वस्तु को लपेटने के लिए एक नया नोड बनाते हैं, जोड़तोड़ करते हैं, इसे हटाते हैं और एचटीएमएल को पकड़ते हैं।

यदि आप एक स्ट्रिंग प्रतिनिधित्व के बाद हैं, तो साथ जाएं new String(obj)

अपडेट करें

मैंने 2009 में मूल उत्तर लिखा था। 2014 तक, अधिकांश प्रमुख ब्राउज़र अब outerHTMLएक मूल संपत्ति के रूप में समर्थन करते हैं (उदाहरण के लिए, फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर ), इसलिए आप कर सकते हैं:

$('#item-of-interest').prop('outerHTML');

25
यह बेकार है कि ऐसा करने का कोई तरीका नहीं है, लेकिन यह एक महान समाधान है।
स्टीव

2
यह सिर और शरीर के टैग हटाता है
ǝl

1
@ user85461 यह एक मान्य DOM नोड नहीं है, हालाँकि, इसलिए इसे शुरू करने के लिए बाहरी HTML को कॉल करने का प्रयास करना गलत होगा। (क्या केवल एक छोटा उपसमूह में जा सकता $(...)है एक वैध डोम नोड है।)
जॉन फेमिनेला

1
@ यह आपको आंतरिक html, या सरल, तत्व के अंदर क्या देता है, जबकि आउटरएचटीएमएल आपको एक पूरे के रूप में
zakius

2
ध्यान दें, कि आप खो देंगेdata
ओलेग

190

JQuery 1.6 के साथ, यह एक और अधिक सुंदर समाधान लगता है:

$('#element-of-interest').prop('outerHTML');

5
@ जीन-फिलिपेक्लर्क फ़ायरफ़ॉक्स 15.0.1 (लिनक्स) पर यह आकर्षण की तरह काम करता है।
डेव

51

मूल तत्व को हथियाने के लिए .get (0) का उपयोग करें, और इसकी बाहरी HTML संपत्ति प्राप्त करें:

var $elem = $('<a href="#">Some element</a>');
console.log("HTML is: " + $elem.get(0).outerHTML);

इतना बेहतर है कि यह मेरी विशेषताओं को भी बरकरार रखे। धन्यवाद!
रोहित

21

क्या आप थोड़ा और स्पष्ट कर सकते हैं? यदि आप एक टैग के अंदर HTML प्राप्त करने की कोशिश कर रहे हैं, तो आप कुछ ऐसा कर सकते हैं:

HTML स्निपेट:

<p><b>This is some text</b></p>

jQuery:

var txt = $('p').html(); // Value of text is <b>This is some text</b>

9

HTML नोड (ऑब्जेक्ट) के लिए क्या गुण और विधियाँ उपलब्ध हैं, यह जानने का सबसे अच्छा तरीका है:

console.log($("#my-node"));

JQuery 1.6+ से आप अपने स्ट्रिंग आउटपुट में HTML टैग्स को शामिल करने के लिए बस बाहरी HTML का उपयोग कर सकते हैं:

var node = $("#my-node").outerHTML;

4
यह $('#my-node').get(0).outerHTMLmppfiles के जवाब के रूप में है
schellmax

1
.outerHTMLमेरे लिए काम नहीं किया, लेकिन .prop('outerHTML')किया।
9:15 बजे

7

jQuery यहाँ पर है, इसलिए:

jQuery.fn.goodOLauterHTML= function() {
    return $('<a></a>').append( this.clone() ).html();
}

सभी HTML सामान वापस करें:

$('div' /*elys with HTML text stuff that you want */ ).goodOLauterHTML(); // alerts tags and all

4

यह मेरे लिए ठीक काम लगता है:

$("#id")[0].outerHTML

2
मैं भी इस का उपयोग कर रहा था, लेकिन यह फ़ायरफ़ॉक्स 6.0.1 के लिए काम नहीं करता है।
मिकॉन्ग

2

स्वीकृत उत्तर पाठ नोड्स को कवर नहीं करता है (अपरिभाषित मुद्रित है)।

यह कोड स्निपेट इसे हल करता है:

var htmlElements = $('<p><a href="http://google.com">google</a></p>↵↵<p><a href="http://bing.com">bing</a></p>'),
    htmlString = '';
    
htmlElements.each(function () {
    var element = $(this).get(0);

    if (element.nodeType === Node.ELEMENT_NODE) {
        htmlString += element.outerHTML;
    }
    else if (element.nodeType === Node.TEXT_NODE) {
        htmlString += element.nodeValue;
    }
});

alert('String html: ' + htmlString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


1

.Html का उपयोग करने के लिए क्लोन और जोड़ने की आवश्यकता नहीं है (), आप कर सकते हैं:

$('#item-of-interest').wrap('<div></div>').html()

1
लेकिन wrap()लिपटे हुए तत्व को वापस नहीं करता है , कि उस तत्व को जिसके साथ इसे लपेटा गया है? तो यह चाहिए के HTML देना #item-of-interest नहीं यह की मूल div(जब तक कि jQuery के 2012 के फरवरी के बाद से बदल गया) तत्व।
डेविड का कहना है कि मोनिका

0

jQuery.makeArray(obj)उपयोगिता फ़ंक्शन का उपयोग करना संभव हो सकता है :

var obj = $('<p />',{'class':'className'}).html('peekaboo');
var objArr = $.makeArray(obj);
var plainText = objArr[0];

0

यदि आप इसे कहीं पास करने के लिए एक HTML तत्व को कड़ा करना चाहते हैं और इसे एक तत्व के लिए वापस भेजते हैं तो तत्व के लिए एक अद्वितीय क्वेरी बनाकर प्रयास करें:

// 'e' is a circular object that can't be stringify
var e = document.getElementById('MyElement')

// now 'e_str' is a unique query for this element that can be stringify 
var e_str = e.tagName
  + ( e.id != "" ? "#" + e.id : "")
  + ( e.className != "" ? "." + e.className.replace(' ','.') : "");

//now you can stringify your element to JSON string
var e_json = JSON.stringify({
  'element': e_str
})

से

//parse it back to an object
var obj = JSON.parse( e_json )

//finally connect the 'obj.element' varible to it's element
obj.element = document.querySelector( obj.element )

//now the 'obj.element' is the actual element and you can click it for example:
obj.element.click();

-4
new String(myobj)

यदि आप स्ट्रिंग को संपूर्ण ऑब्जेक्ट को क्रमबद्ध करना चाहते हैं, तो JSON का उपयोग करें ।

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