jquery - tutorial - w3schools




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

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

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


JQuery बढ़ाएं:

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

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


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

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


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

document.getElementById(id).outerHTML

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


आप भी get कर सकते get (jQuery ऑब्जेक्ट द्वारा मिलान किए गए डीओएम तत्वों को पुनर्प्राप्त करें।)।

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

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

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

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

या

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

एकाधिक विकल्प और एचटीएमएल की एक सरणी वापस।

$('input').outerHTML()

वापसी:

["<input id="input1" type="text">", "<input id="input2" type="text">"]

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

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

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

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

यह मेरे लिए काम किया।

पीएस : यह jQuery 1.6 में जोड़ा गया है।


इसके लिए एक समारोह उत्पन्न करने की जरूरत नहीं है। बस इसे इस तरह करें:

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

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

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

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

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

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

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


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

तर्कसंगत रूप से, "बाहरी" एचटीएमएल केवल तब ही समझ में आता है जब आपके पास एक तत्व होता है, लेकिन ऐसी स्थितियां होती हैं जहां 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);

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


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

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

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

संपादित करें : element.outerHTML लिए मूल समर्थन आंकड़े


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

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

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

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

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


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

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

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

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

मैंने बाहरी HTML टोक़िमॉन समाधान (क्लोन के बिना) के साथ यह सरल परीक्षण किया है, और बाह्य HTML2 जेसिका समाधान (क्लोन) है

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)) ब्राउज़र था

बाहरी HTML: 81 मिमी
बाहरी HTML2: 43 9एमएस

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

हमें मिला

बाहरी एचटीएमएल: 5 9 4 एमएमएस
बाहरी HTML2: 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)


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

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

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


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

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

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

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


वास्तव में jQuery-esque होने के लिए, आप outerHTML() html() को गेटर और एक सेटर बनना चाहते हैं और इसके व्यवहार को 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 के स्थान पर सेट किया जाएगा।

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


.outerHTML रूप में एक पूर्ण jQuery प्लगइन बनाने के लिए, निम्न स्क्रिप्ट किसी भी जेएस फ़ाइल में जोड़ें और अपने हेडर में 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>


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

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

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

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

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

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







jquery