चयनित तत्व का बाहरी HTML प्राप्त करें

Question

मैं jQuery के साथ चयनित ऑब्जेक्ट का HTML प्राप्त करने की कोशिश कर रहा हूं। मुझे .html()फंक्शन की जानकारी है ; मुद्दा यह है कि मुझे चयनित ऑब्जेक्ट (इस मामले में एक तालिका पंक्ति, जहां .html()केवल पंक्ति के अंदर की कोशिकाओं को लौटाता है) सहित HTML की आवश्यकता है ।

मैंने आसपास खोज की है और एक वस्तु के क्लोनिंग के कुछ बहुत ही 'हैकिश' प्रकार के तरीकों को पाया है, इसे एक नए बनाए गए div, आदि, आदि से जोड़ रहा है, लेकिन यह वास्तव में गंदा लगता है। क्या कोई बेहतर तरीका है, या jQuery का नया संस्करण (1.4.2) किसी भी प्रकार की outerHtmlकार्यक्षमता प्रदान करता है?

Comments

यह अपमानजनक है कि jQuery के पास ऐसा काम करने का साधन नहीं है। मुझे भी यही चाहिए।

— जोसेफ सलैब

मैंने इस थ्रेड के संदर्भ के साथ एक फीचर अनुरोध पोस्ट किया है, और प्रारंभिक प्रतिक्रिया सकारात्मक थी। Bugs.jquery.com/ticket/8142

— mindplay.dk

उल्हास टस्कानो के समाधान को आजमाने से कुछ लोगों को बचाने के लिए, यह काम नहीं करता है।

— डेव

उह, wth चल रहा है। $('div')[0].outerHTML।

— सलमान ने अब्बास

@ टस्कन का मतलब $ ("# चयनकर्ता") था। प्रोप ("

— बाहरी एचटीएमएल

Answer 1

2014 संपादित करें: प्रश्न और यह उत्तर 2010 से हैं। उस समय, कोई बेहतर समाधान व्यापक रूप से उपलब्ध नहीं था। अब, अन्य उत्तरों में से कई बेहतर हैं: उदाहरण के लिए एरिक हू का, या री कैपचा का।

इस साइट पर आपके लिए एक समाधान है: jQuery: externalHTML | Yelotofu

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};

Comments

मैंने इसे देखा, लेकिन इसे टालने की कोशिश कर रहा था क्योंकि यह हैक करने के लिए लग रहा था और जैसे कि एक बेहतर तरीका होना चाहिए था, लेकिन यह अच्छी तरह से काम करता है। धन्यवाद।

— रयान

$ ( '[चयनकर्ता]') [0] .outerHTML

— Drogon

@ ड्रेडन: ज्ञात हो कि outerHTMLफ़ायरफ़ॉक्स में केवल 11 संस्करण (मार्च 2012) से समर्थित है।

— ब्लेज़

@PavingWays: फ़ायरफ़ॉक्स के बचाव में: outerHTMLMicrosoft द्वारा आविष्कृत एक स्वामित्व विशेषता है, न कि W3C मानक। (मजेदार तथ्य: innerHTMLकेवल HTML5 से मानकीकृत है )

— Blaise

शुद्ध जेएसel.outerHTML || document.createElement('div').appendChild( el.cloneNode( true ) ).parentNode.innerHTML

— रब

Answer 2

मेरा मानना ​​है कि वर्तमान में (5/1/2012), सभी प्रमुख ब्राउज़र बाहरी HTML फ़ंक्शन का समर्थन करते हैं। यह मुझे लगता है कि यह स्निपेट पर्याप्त है। मैं व्यक्तिगत रूप से इसे याद करना चुनूंगा:

// Gives you the DOM element without the outside wrapper you want
$('.classSelector').html()

// Gives you the outside wrapper as well only for the first element
$('.classSelector')[0].outerHTML

// Gives you the outer HTML for all the selected elements
var html = '';
$('.classSelector').each(function () {
    html += this.outerHTML;
});

//Or if you need a one liner for the previous code
$('.classSelector').get().map(function(v){return v.outerHTML}).join('');

संपादित करें : बुनियादी समर्थन आँकड़े के लिएelement.outerHTML

• फ़ायरफ़ॉक्स (गेको): 11 .... 2012-03-13 को जारी किया गया
• क्रोम: 0.2 …………… 2008-09-02 को जारी किया गया
• इंटरनेट एक्सप्लोरर 4.0 ... 1997 का विमोचन
• ओपेरा 7 ...................... 2003-01-28 को जारी किया गया
• सफारी 1.3 ................... 2006-01-12 को जारी किया गया

Comments

@SalmanPK FireFox ने 2011-11-11 तक इस संपत्ति का समर्थन नहीं किया। Bugzilla.mozilla.org/show_bug.cgi?id=92264 अभी भी 3.6 पर बहुत सारे उपयोगकर्ता अटके हुए हैं। मुझे लगता है कि यह वास्तव में एक आदर्श उदाहरण है कि किसी ने देशी कार्यक्षमता पर jQuery का उपयोग करना क्यों चुना।

— लूसिफ़ेर सैम

@LuciferSam फ़ायरफ़ॉक्स 3.6 में gs.statcounter.com के अनुसार ~ 6% वैश्विक बाज़ार हिस्सेदारी है, हालांकि, पिछले 6 महीनों (दिसंबर -11 मई -12) के परिणामों को फ़िल्टर करते हुए और यूएसए ने इसे अपनी शीर्ष 12 सूची (3 से नीचे) में धकेल दिया %)। मैंने इस विंडो को चुना क्योंकि यह लेख जनवरी 2012 के बाद एफएफ 3.6 उपयोग में काफी गिरावट आई है। इस डेटा को देखते हुए, मैं पीछे की संगतता के लिए सरल कोड के लिए अपने समाधान से खड़ा हूं।

— एरिक हू

अधिक सहमत नहीं हो सका। यह यहाँ सही उत्तर है, अन्य सामान नहीं जो लोग सुझा रहे हैं। मैं जिस तत्व का चयन करता हूं उसमें ऐसी विशेषताएँ हैं जिन्हें मैं रखना चाहता हूं जो अन्य उत्तरों से खो गए हैं। नरक, यह भी IE में काम करता है!

— मैथ्यू बोनिग

१३ मार्च २०१२ (अभी तय) तक फ़ायरफ़ॉक्स ११ को रिलीज़ नहीं किया गया था , यानी इस लेखन के एक साल से भी कम समय पहले। JQuery के लाभों में से एक यह है कि यह पुराने ब्राउज़रों का समर्थन करता है। मुझे लगता है कि कम से कम एक वर्ष का समर्थन उचित है, और कुछ साइटों को स्पष्ट रूप से और अधिक (याद है, jQuery IE6 का समर्थन करता है) चाहते हैं।

— मैथ्यू फ़्लेशेन

@ EricHu स्टेटकाउंटर में IE8 में वैश्विक ब्राउज़र शेयर का 9.3% भी है। फिर भी मेरी कुछ वेबसाइटें 40% के करीब हैं। यह सब सापेक्ष है और वेबसाइट से वेबसाइट पर काफी भिन्न होता है, फ़ायरफ़ॉक्स 3.6 अभी भी मेरी कुछ वेबसाइटों पर लगभग 10% है। ग्लोबल मार्केटशेयर का मतलब कुछ भी नहीं है। यह आपकी वेबसाइट के दर्शकों के बारे में है।

— जॉर्ज रीथ

Answer 3

इसके लिए कोई फ़ंक्शन उत्पन्न करने की आवश्यकता नहीं है। बस इसे इस तरह से करें:

$('a').each(function(){
    var s = $(this).clone().wrap('<p>').parent().html();
    console.log(s);
});

(आपके ब्राउज़र का कंसोल दिखाएगा कि लॉग क्या है, वैसे भी। 2009 के आसपास के अधिकांश नवीनतम ब्राउज़र में यह सुविधा है।)

जादू अंत में यह है:

.clone().wrap('<p>').parent().html();

क्लोन का मतलब है कि आप वास्तव में डोम को परेशान नहीं कर रहे हैं। इसके बिना इसे चलाएं और आप pसभी हाइपरलिंक (इस उदाहरण में) से पहले / बाद में डाले गए टैग देखेंगे , जो अवांछनीय है। तो, हाँ, का उपयोग करें .clone()।

जिस तरह से यह काम करता है वह यह है कि यह प्रत्येक aटैग लेता है , रैम में इसका क्लोन बनाता है, pटैग के साथ लपेटता है , इसके माता-पिता को प्राप्त करता है (जिसका अर्थ है pटैग), और फिर innerHTMLइसे की संपत्ति मिलती है।

EDIT : सलाह ली और divटैग को pटैग में बदल दिया क्योंकि यह कम टाइपिंग है और समान काम करता है।

Comments

मुझे आश्चर्य है कि jQuery टीम एक आउटरएचटीएमएल () पद्धति को क्यों नहीं जोड़ता है?

— डॉन्नी वी।

@ डेरेक, इससे कोई फर्क नहीं पड़ेगा। मैं इसके अंदर कुछ पाने के लिए एक रैपर के रूप में DIV का उपयोग कर रहा हूं।

— Volomike

। .clone () चादर ( '<p>') माता-पिता () एचटीएमएल ()।। छोटा है

— Uüur Gümüşhan

हाँ, कम कीस्ट्रोक्स और समान प्रभाव को प्राप्त करता है।

— वोलोमाइक 16

सामान्य समाधान के लिए P के बजाय DIV का उपयोग करना बेहतर है - सभी तत्वों को P में मान्य HTML के रूप में नहीं लपेटा जा सकता है।

— ब्लेज़मॉन्गर

Answer 4

के बारे में क्या prop('outerHTML'):?

var outerHTML_text = $('#item-to-be-selected').prop('outerHTML');

और सेट करने के लिए:

$('#item-to-be-selected').prop('outerHTML', outerHTML_text);

इसने मेरे लिए काम किया।

PS : इसे jQuery 1.6 में जोड़ा गया है ।

Comments

अन्य उत्तरों की तुलना में बहुत साफ और छोटा कोड। प्रश्न: क्या इसमें अन्य जवाबों के अनुसार बाहरी HTML प्रतिबंध भी हैं? क्या यह एफएफ <11 में काम करता है?

— मैक्रों 12

अच्छी तरह से काम करता है, यह सिर्फ यहाँ सबसे अच्छा समाधान हो सकता है। जहाँ तक ब्राउज़र जाते हैं यह बाहरी एचटीएमएलएम के समान संगत होना चाहिए। प्रोप () विधि मूल रूप से केवल बाहरी HTML संपत्ति प्राप्त कर रही है।

— टॉम टॉम

यह समाधान बेहतर है, हालांकि 2011 में Jquery 1.6.1 जारी किया गया था। प्रश्न (और मेरा जवाब) 2010 से हैं।

— डेविड वी।

मेरे लिए "$ ('[चयनकर्ता]') [0]। रूटर HTML;" किसी भी मामले में काम नहीं किया, लेकिन "$ ('# आइटम-टू-बी-चयनित')। प्रोप ('बाहरी HTML');" हाँ!

— एडुआर्डो लुसियो

। $ ( '# आइटम करने के लिए किया जा चयनित') attr ( 'outerHTML'); // ** पहले के लिए jQuery के

— मीटाई.कॉम

Answer 5

JQuery का विस्तार करें:

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  };
})(jQuery);

और इसे इस तरह से उपयोग करें: $("#myTableRow").outerHTML();

Comments

इस समाधान के साथ छोटी समस्या: आपको लपेटने () से पहले क्लोन () करने की आवश्यकता है, अन्यथा आप दस्तावेज़ में अतिरिक्त रैपिंग <div> छोड़ रहे हैं।

— mindplay.dk 14

धन्यवाद, mindplay.dk - मैंने आपके सुझाव को शामिल करने के लिए कोड को संपादित किया .. अच्छी पकड़। :)

— जेसिका

इसके बारे में क्या उलटा हो सकता है: return $('<div>').append(this.clone()).html();यह सिर्फ एक छोटे से अधिक बिंदु है।

— जस्टिन वर्केंटिन

आपको सबसे पहले बाहरी HTML की जांच करनी चाहिए और इसका उपयोग करने वाले ब्राउज़र के लिए बस इस्तेमाल करना चाहिए

— जेम्स वेस्टगेट

यह मेरे जैसे लोगों के लिए बहुत अच्छा है जो jQuery ऑब्जेक्ट्स, और .appendTT () और .append () फ़ंक्शन का उपयोग करके AJAX प्रतिक्रियाओं में HTML बनाना पसंद करते हैं। । रूटर HTML मैंने अपने परीक्षण में जो देखा उससे उन उदाहरणों के लिए काम नहीं करता है। हो सकता है कि कोई और जाँच करना चाहता हो, लेकिन मेरे पास समय नहीं है।

— सीन केंडल

Answer 6

मैं अर्पण (13 दिसंबर 10:59) से सहमत हूं।

ऐसा करने का उनका तरीका वास्तव में ऐसा करने का एक बेहतर तरीका है, जैसा कि आप क्लोन का उपयोग नहीं करते हैं। क्लोन विधि बहुत समय लेने वाली है, यदि आपके पास बाल तत्व हैं, और किसी और को यह ध्यान नहीं था कि IE वास्तव में outerHTMLविशेषता है (हाँ IE वास्तव में कुछ उपयोगी चालें हैं इसके आस्तीन)।

लेकिन मैं शायद उनकी स्क्रिप्ट को थोड़ा अलग बनाऊंगा:

$.fn.outerHTML = function() {
    var $t = $(this);
    if ($t[0].outerHTML !== undefined) {
        return $t[0].outerHTML;
    } else {
        var content = $t.wrap('<div/>').parent().html();
        $t.unwrap();
        return content;
    }
};

Comments

इसने मेरे लिए पूरी तरह से काम किया। के साथ एक बग के कारण clone()और textareaके, मैं एक गैर क्लोन समाधान की जरूरत है, और इस पर मौके था।

— श्पीगफोर्ड

+1 का उपयोग देशी के लिए outerHTMLजहां उपलब्ध है, क्योंकि यह Internet Explorer के अलावा Chrome द्वारा समर्थित है।

— एंडी ई

अगर (('t में बाहरी HTML' [०]]) चेतावनी ('देवता, अपने ब्राउज़र को अपडेट करें');

— साइको ब्रैम

Answer 7

वास्तव में jQuery-esque होने के लिए, आप outerHTML()एक गटर और सेटर बनना चाहते हैं और इसका व्यवहार html()यथासंभव हो सकता है:

$.fn.outerHTML = function (arg) {
    var ret;

    // If no items in the collection, return
    if (!this.length)
        return typeof arg == "undefined" ? this : null;
    // Getter overload (no argument passed)
    if (!arg) {
        return this[0].outerHTML || 
            (ret = this.wrap('<div>').parent().html(), this.unwrap(), ret);
    }
    // Setter overload
    $.each(this, function (i, el) {
        var fnRet, 
            pass = el,
            inOrOut = el.outerHTML ? "outerHTML" : "innerHTML";

        if (!el.outerHTML)
            el = $(el).wrap('<div>').parent()[0];

        if (jQuery.isFunction(arg)) { 
            if ((fnRet = arg.call(pass, i, el[inOrOut])) !== false)
                el[inOrOut] = fnRet;
        }
        else
            el[inOrOut] = arg;

        if (!el.outerHTML)
            $(el).children().unwrap();
    });

    return this;
}

वर्किंग डेमो: http://jsfiddle.net/AndyE/WLKAa/

यह हमें एक तर्क पारित करने की अनुमति देता है outerHTML, जो हो सकता है

• एक रद्द करने योग्य फ़ंक्शन - function (index, oldOuterHTML) { }- जहां वापसी मान तत्व के लिए नया HTML बन जाएगा (जब तक falseकि वापस नहीं किया जाता है)।
• एक स्ट्रिंग, जो प्रत्येक तत्व के HTML के स्थान पर सेट की जाएगी।

अधिक जानकारी के लिए, के लिए jQuery डॉक्स देखें html()।

Comments

इसे jQuery कोर में जोड़ा जाना चाहिए ताकि लोगों को इसके बारे में सोचने की आवश्यकता न हो। मेरा एकमात्र सवाल यह है कि क्या रैप () / अनप्रैप () क्लोन () की तुलना में बेहतर या खराब प्रदर्शन की संभावना है?

— IMSoP

IMSoP: आम तौर पर, रैप / अनप्रैप तेज होगा क्योंकि क्लोन में सभी बाल तत्वों और तत्व की विशेषताओं को कॉपी करना है। लपेट () केवल एक ही तत्व बनाता है, और इसे खोल देना () इसे नष्ट कर देता है, अन्य सभी तत्व बस चले जाते हैं, जो कि ज्यादातर समय एक त्वरित संचालन होता है।

— एंडी ई

Answer 8

आप jQuery ऑब्जेक्ट द्वारा मेल किए गए DOM तत्वों को प्राप्त कर सकते हैं (फिर से प्राप्त करें) का उपयोग कर सकते हैं ।

उदाहरण के लिए:

$('div').get(0).outerHTML;//return "<div></div>"

विस्तार विधि के रूप में:

jQuery.fn.outerHTML = function () {
  return this.get().map(function (v) {
    return v.outerHTML
  }).join()
};

या

jQuery.fn.outerHTML = function () {
  return $.map(this.get(), function (v) {
    return v.outerHTML
  }).join()
};

एकाधिक विकल्प और सभी मिलान तत्वों के बाहरी HTML को वापस करें।

$('input').outerHTML()

वापसी:

'<input id="input1" type="text"><input id="input2" type="text">'

Answer 9

एक पूर्ण jQuery प्लगइन बनाने के .outerHTMLलिए, निम्न स्क्रिप्ट को किसी भी js फ़ाइल में जोड़ें और अपने हेडर में jQuery के बाद शामिल करें:

_{अद्यतन} नया संस्करण बेहतर नियंत्रण के साथ-साथ एक अधिक jQuery के चयनकर्ता के अनुकूल सेवा है! :)

;(function($) {
    $.extend({
        outerHTML: function() {
            var $ele = arguments[0],
                args = Array.prototype.slice.call(arguments, 1)
            if ($ele && !($ele instanceof jQuery) && (typeof $ele == 'string' || $ele instanceof HTMLCollection || $ele instanceof Array)) $ele = $($ele);
            if ($ele.length) {
                if ($ele.length == 1) return $ele[0].outerHTML;
                else return $.map($("div"), function(ele,i) { return ele.outerHTML; });
            }
            throw new Error("Invalid Selector");
        }
    })
    $.fn.extend({
        outerHTML: function() {
            var args = [this];
            if (arguments.length) for (x in arguments) args.push(arguments[x]);
            return $.outerHTML.apply($, args);
        }
    });
})(jQuery);

यह आपको न केवल एक तत्व का बाहरी HTML प्राप्त करने की अनुमति देगा, बल्कि एक बार में कई तत्वों का एरियर रिटर्न भी प्राप्त कर सकता है! और दोनों jQuery के मानक शैलियों में इस तरह के रूप में इस्तेमाल किया जा सकता है:

$.outerHTML($("#eleID")); // will return outerHTML of that element and is 
// same as
$("#eleID").outerHTML();
// or
$.outerHTML("#eleID");
// or
$.outerHTML(document.getElementById("eleID"));

कई तत्वों के लिए

$("#firstEle, .someElesByClassname, tag").outerHTML();

स्निपेट उदाहरण:

console.log('$.outerHTML($("#eleID"))'+"\t", $.outerHTML($("#eleID"))); 
console.log('$("#eleID").outerHTML()'+"\t\t", $("#eleID").outerHTML());
console.log('$("#firstEle, .someElesByClassname, tag").outerHTML()'+"\t", $("#firstEle, .someElesByClassname, tag").outerHTML());

var checkThisOut = $("div").outerHTML();
console.log('var checkThisOut = $("div").outerHTML();'+"\t\t", checkThisOut);
$.each(checkThisOut, function(i, str){ $("div").eq(i).text("My outerHTML Was: " + str); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/JDMcKinstry/ce699e82c7e07d02bae82e642fb4275f/raw/deabd0663adf0d12f389ddc03786468af4033ad2/jQuery.outerHTML.js"></script>
<div id="eleID">This will</div>
<div id="firstEle">be Replaced</div>
<div class="someElesByClassname">At RunTime</div>
<h3><tag>Open Console to see results</tag></h3>

Answer 10

आप भी इसे इस तरह से कर सकते हैं

document.getElementById(id).outerHTML

जहां आईडी उस तत्व की आईडी है जिसे आप ढूंढ रहे हैं

Comments

$("#" + id).attr("id")अविश्वसनीय रूप से बेमानी है। यदि आपके पास पहले से ही एक चर में आईडी है, तो आप तत्व से डोम को खींचने के लिए एक jquery चयनकर्ता का उपयोग क्यों कर रहे हैं, फिर इसकी आईडी विशेषता को क्वेरी कर रहे हैं?

— सैम ड्यूफेल

Answer 11

मैंने फ़ायरफ़ॉक्स पर काम करने के लिए बाहरी HTML प्राप्त करने के लिए जेसिका के समाधान (जोश द्वारा संपादित किया गया था) का उपयोग किया। हालाँकि समस्या यह है कि मेरा कोड टूट रहा था क्योंकि उसके समाधान ने तत्व को एक DIV में लपेट दिया था। कोड की एक और पंक्ति जोड़ने से वह समस्या हल हो गई।

निम्न कोड आपको DOMHTML को अपरिवर्तित छोड़ने वाला बाहरी HTML देता है।

$jq.fn.outerHTML = function() {
    if ($jq(this).attr('outerHTML'))
        return $jq(this).attr('outerHTML');
    else
    {
    var content = $jq(this).wrap('<div></div>').parent().html();
        $jq(this).unwrap();
        return content;
    }
}

और इसे इस तरह से उपयोग करें: $ ("# myDiv"); बाहरी HTML ();

आशा है कि कोई इसे उपयोगी पाता है!

Comments

जैसे @mindplay उसकी comment- में पता चलता है बस .clone का उपयोग यह आसान है

— Yarin

Answer 12

// no cloning necessary    
var x = $('#xxx').wrapAll('<div></div>').parent().html(); 
alert(x);

यहाँ फिडेल: http://jsfiddle.net/ezmilhouse/Mv76a/

Answer 13

यदि परिदृश्य नई पंक्ति को गतिशील रूप से जोड़ रहा है, तो आप इसका उपयोग कर सकते हैं:

var row = $(".myRow").last().clone();
$(".myRow").last().after(row);

.myrowका वर्गनाम है <tr>। यह अंतिम पंक्ति की एक प्रति बनाता है और एक नई अंतिम पंक्ति के रूप में सम्मिलित करता है। यह IE7 में भी काम करता है , जबकि [0].outerHTMLविधि ie7 में असाइनमेंट की अनुमति नहीं देती है

Answer 14

नोड .cloneNode () शायद ही हैक की तरह लगता है। आप नोड को क्लोन कर सकते हैं और इसे किसी भी वांछित मूल तत्व में जोड़ सकते हैं, और व्यक्तिगत गुणों में हेरफेर करके भी इसे जोड़ सकते हैं, बजाय इसके उस पर नियमित भाव चलाने के लिए, या इसे DOM में जोड़ें, फिर इसे बाद में हेरफेर करें।

उस ने कहा, आप एचटीएमएल स्ट्रिंग प्रतिनिधित्व का निर्माण करने के लिए तत्व की विशेषताओं पर भी पुनरावृति कर सकते हैं । ऐसा लगता है कि यह है कि किसी भी बाहरी HTML समारोह को लागू किया जाएगा एक जोड़ने के लिए jQuery थे।

Answer 15

मैंने जेसिका द्वारा अद्यतन वोलोमाइक के समाधान का उपयोग किया है। बस यह देखने के लिए एक चेक जोड़ा गया कि क्या तत्व मौजूद है, और ऐसा नहीं होने की स्थिति में इसे खाली कर दें।

jQuery.fn.outerHTML = function() {
return $(this).length > 0 ? $(this).clone().wrap('<div />').parent().html() : '';
};

बेशक, इसका उपयोग करें:

$('table#buttons').outerHTML();

Answer 16

आप यहाँ एक अच्छा .netHTML () विकल्प https://github.com/darlesson/jquery-outerhtml पा सकते हैं ।

.Html () के विपरीत, जो केवल तत्व की HTML सामग्री लौटाता है, .netHTML () का यह संस्करण चयनित तत्व और उसके HTML सामग्री को लौटाता है या इसे .replaceWith () विधि के रूप में प्रतिस्थापित करता है, लेकिन अंतर के साथ जो HTML को बदलने की अनुमति देता है। पीछा कर रहा है।

उदाहरण ऊपर के URL में भी देखे जा सकते हैं।

Answer 17

ध्यान दें कि जोश का समाधान केवल एक ही तत्व के लिए काम करता है।

तर्क से, "बाहरी" HTML वास्तव में केवल तभी समझ में आता है जब आपके पास एक भी तत्व होता है, लेकिन ऐसी परिस्थितियां होती हैं जहां यह HTML तत्वों की सूची लेने और उन्हें मार्कअप में बदलने के लिए समझ में आता है।

जोश के समाधान का विस्तार, यह एक कई तत्वों को संभाल लेगा:

(function($) {
  $.fn.outerHTML = function() {
    var $this = $(this);
    if ($this.length>1)
      return $.map($this, function(el){ return $(el).outerHTML(); }).join('');
    return $this.clone().wrap('<div/>').parent().html();
  }
})(jQuery);

संपादित करें: जोश के समाधान के साथ एक और समस्या, ऊपर टिप्पणी देखें।

Comments

अधिकांश jQuery के "गेट्टर" तरीके केवल पहले तत्व के लिए डेटा वापस करते हैं, इसलिए यह इस व्यवहार से मेल खाने के लिए अधिक समझ में आता है।

— एंडी ई

मुझे लगता है कि मैंने स्पष्ट रूप से कहा कि यह इस तरह से क्यों काम करता है? जब आप तत्वों की एक सूची है, तो यह बदसूरत / जटिल कोड के लिए करना होगा - अगर किसी कारण से आप केवल पहले तत्व के लिए मार्कअप चाहते हैं, तो बस उपयोग करें: पहले अपने चयनकर्ता में।

— mindplay.dk

ज़रूर, जैसे आप कई तत्वों के HTML प्राप्त करने के लिए हर किसी के समाधान के साथ मानचित्र का उपयोग कर सकते हैं। सभी मैं कह रहा था कि यह मानक jQuery के तरीकों के व्यवहार से मेल खाने के लिए अधिक सुसंगत है।

— एंडी ई

Answer 18

समान समाधानremove()अस्थायी DOM ऑब्जेक्ट के जोड़े के साथ को करें ।

Answer 19

मैंने बाहरी HTML के साथ टोकिमोन सॉल्यूशन (क्लोन के बिना) और बाहरी एचटीएमएल 2 के जेसिका सॉल्यूशन (क्लोन) के साथ यह सरल परीक्षण किया है

console.time("outerHTML");
for(i=0;i<1000;i++)
 {                 
  var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML();
 }                 
console.timeEnd("outerHTML");

console.time("outerHTML2");

 for(i=0;i<1000;i++)
 {                 
   var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML2();
  }                 
  console.timeEnd("outerHTML2");

और मेरे क्रोमियम (संस्करण 20.0.1132.57 (0)) ब्राउज़र में परिणाम था

आउटरएचटीएमएल: 81 मी
: 81ms आउटरएचटीएमएल 2: 439ms

लेकिन अगर हम नेटिक आउटबोल HTML फंक्शन के बिना टोकिमॉन सॉल्यूशन का उपयोग करते हैं (जो अब लगभग हर ब्राउज़र में समर्थित है)

हमें मिला

आउटरएचटीएमएल
: 594ms आउटरएचटीएमएल 2: 332ms

और वास्तविक दुनिया के उदाहरणों में अधिक लूप और तत्व होने वाले हैं, इसलिए सही संयोजन होगा

$.fn.outerHTML = function() 
{
  $t = $(this);
  if( "outerHTML" in $t[0] ) return $t[0].outerHTML; 
  else return $t.clone().wrap('<p>').parent().html(); 
}

इसलिए क्लोन विधि वास्तव में रैप / अनप्रैप विधि से अधिक तेज है
(jquery 1.7.2)

Answer 20

यहां jquery के लिए एक बहुत ही अनुकूलित बाहरी HTML प्लगइन है: ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => 2 अन्य तेज़ कोड स्निपेट कुछ ब्राउज़रों जैसे FF या 11 के साथ संगत नहीं हैं)

(function($) {

  var DIV = document.createElement("div"),
      outerHTML;

  if ('outerHTML' in DIV) {
    outerHTML = function(node) {
      return node.outerHTML;
    };
  } else {
    outerHTML = function(node) {
      var div = DIV.cloneNode();
      div.appendChild(node.cloneNode(true));
      return div.innerHTML;
    };
  }

  $.fn.outerHTML = function() {
    return this.length ? outerHTML(this[0]) : void(0);
  };

})(jQuery);

@Andy E => मैं आपसे सहमत नहीं हूँ। आउटरएचएमटीएल को एक गेट्टर और सेटर की आवश्यकता नहीं है: jQuery पहले से ही हमें 'प्रतिस्थापन' दे रहा है ...

@mindplay => आप सभी बाहरी HTML से क्यों जुड़ रहे हैं? jquery.html FIRST तत्व की केवल HTML सामग्री ही लौटाते हैं।

(क्षमा करें, टिप्पणी लिखने के लिए पर्याप्त प्रतिष्ठा नहीं है)

Answer 21

छोटा एवं सुन्दर।

[].reduce($('.x'), function(i,v) {return i+v.outerHTML}, '')

या तीर क्रियाओं की मदद से अधिक मीठी घटना

[].reduce.call($('.x'), (i,v) => i+v.outerHTML, '')

या बिना jQuery के सब पर

[].reduce.call(document.querySelectorAll('.x'), (i,v) => i+v.outerHTML, '')

या यदि आपको यह तरीका पसंद नहीं है, तो जाँच लें

$('.x').get().reduce((i,v) => i+v.outerHTML, '')

Answer 22

यह वेनिला जावास्क्रिप्ट के साथ काफी सरल है ...

document.querySelector('#selector')

Answer 23

यह डोम पर तत्वों को बदलने के लिए बहुत अच्छा है, लेकिन जब html html में गुजरता है तो इस तरह से काम नहीं करता है:

$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();

कुछ हेरफेर के बाद मैंने एक फ़ंक्शन बनाया है जो उपरोक्त को html स्ट्रिंग्स के लिए काम करने की अनुमति देता है:

$.fn.htmlStringOuterHTML = function() {     
    this.parent().find(this).wrap('<div/>');        
    return this.parent().html();
};

Answer 24

$.html = el => $("<div>"+el+"</div>").html().trim();

Answer 25

मैं अपने मुद्दे के जवाब की तलाश में यह भर आया था जो यह था कि मैं एक तालिका पंक्ति को हटाने की कोशिश कर रहा था, फिर इसे तालिका के निचले भाग में जोड़ें (क्योंकि मैं गतिशील रूप से डेटा पंक्तियाँ बना रहा था, लेकिन एक 'नया जोड़ना चाहता था' रिकॉर्ड 'नीचे पंक्ति टाइप करें)।

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

मैंने जो उत्तर पाया वह यह था कि jquery remove()फ़ंक्शन वास्तव में तत्व को वापस करता है, कि यह एक वस्तु के रूप में निकालता है। तो, एक पंक्ति को हटाने और पुनः जोड़ने के लिए यह इस रूप में सरल था ...

var a = $("#trRowToRemove").remove();            
$('#tblMyTable').append(a);  

यदि आप ऑब्जेक्ट नहीं हटा रहे हैं, लेकिन इसे कहीं और कॉपी करना चाहते हैं, तो clone()इसके बजाय फ़ंक्शन का उपयोग करें ।

Answer 26

jQuery प्लगइन एक आशुलिपि के रूप में सीधे पूरे तत्व HTML प्राप्त करने के लिए:

jQuery.fn.outerHTML = function () {
    return jQuery('<div />').append(this.eq(0).clone()).html();
};

और इसे इस तरह से उपयोग करें: $(".element").outerHTML();

Answer 27

$("#myNode").parent(x).html(); 

जहाँ 'x' एक नोड संख्या है, जो पहले वाले के रूप में 0 से शुरू होती है, तो आपको जो सही नोड चाहिए, वह मिलना चाहिए, यदि आप एक विशिष्ट प्राप्त करने का प्रयास कर रहे हैं। यदि आपके पास बाल नोड्स हैं, तो आपको वास्तव में उस आईडी पर एक आईडी डालनी चाहिए जिसे आप चाहते हैं, हालांकि, उस पर केवल शून्य पर। उस पद्धति का उपयोग करना और मेरे लिए कोई 'x' ठीक नहीं था।

Comments

लोग इसे नीचे वोट कर रहे हैं, एक टिप्पणी छोड़ने की परवाह है? मैं कोड को PAR में जा रहा हूं, फिर सामग्री का HTML प्राप्त कर सकता हूं - केवल .html()दिए गए तत्व पर नहीं कर रहा हूं । यह काम करता है और मैं यह क्यों नहीं की एक व्याख्या चाहते हैं।

— vapcguy

Answer 28

सरल उपाय।

var myself = $('#div').children().parent();

Answer 29

$("#myTable").parent().html();

शायद मैं आपके प्रश्न को ठीक से नहीं समझ रहा हूँ, लेकिन इसमें चयनित तत्व के मूल तत्व का html मिलेगा।

क्या आप उसके बाद हैं?

Comments

एकान्त रूप से नहीं, क्योंकि यदि उस माता-पिता के अन्य बच्चे हैं तो उन्हें वह html भी मिल जाएगा।

— डेविड वी।

...उसने क्या क़हा। मैं स्वयं तत्व की तलाश कर रहा हूं, न कि यह और इसके माता-पिता के अन्य बच्चों की। इसको दो वोट कैसे मिले ???

— रयान