নির্বাচিত উপাদানটির বাইরের এইচটিএমএল পান

Question

আমি jQuery সহ একটি নির্বাচিত বস্তুর এইচটিএমএল পাওয়ার চেষ্টা করছি। আমি .html()ফাংশন সম্পর্কে সচেতন ; সমস্যাটি হ'ল আমার নির্বাচিত বস্তু সহ এইচটিএমএল প্রয়োজন (এই ক্ষেত্রে একটি সারণী সারি, যেখানে .html()কেবল সারিটির অভ্যন্তরীণ কক্ষগুলি ফিরিয়ে দেয়)।

আমি আশেপাশে অনুসন্ধান করেছি এবং একটি খুব সহজেই 'হ্যাচিশ' ধরণের পদ্ধতিতে কোনও বস্তুকে ক্লোনিং করার, এটি একটি নতুন নির্মিত ডিভ, ইত্যাদি ইত্যাদিতে যুক্ত করেছি, তবে এটি সত্যিই নোংরা বলে মনে হচ্ছে। এর চেয়ে ভালতর কোনও উপায় আছে, বা jQuery (1.4.2) এর নতুন সংস্করণটি কোনও ধরণের outerHtmlকার্যকারিতা সরবরাহ করে?

Comments

এটি বিদ্বেষজনক যে jQuery এর এমন কাজ করার কোনও অর্থ নেই। আমারও এটি দরকার

— জোসেফ সোবল

আমি এই থ্রেডের একটি রেফারেন্স সহ একটি বৈশিষ্ট্য অনুরোধ পোস্ট করেছি এবং প্রাথমিক প্রতিক্রিয়া ইতিবাচক ছিল। bugs.jquery.com/ticket/8142

— mindplay.dk

কিছু লোককে তাদের কয়েক সেকেন্ড সময় উলহাস তাসকানোর সমাধান চেষ্টা করে বাঁচাতে এটি কার্যকর হয় না doesn't

— ডেভ

আহ, wth চলছে। $('div')[0].outerHTML।

— সালমান ভন আব্বাস

@ টাস্কান মানে $ ("# নির্বাচক")। প্রপ ("বহিরাগত এইচটিএমএল")

— লোক মোগ্রাবি

Answer 1

2014 সম্পাদনা করুন: প্রশ্ন এবং এই উত্তরটি ২০১০ সালের। সময়ে better সময়ে এর চেয়ে ভাল কোনও সমাধান বিস্তৃত ছিল না। এখন, অন্যান্য উত্তরগুলির মধ্যে অনেকগুলিই ভাল: উদাহরণস্বরূপ এরিক হু বা রে ক্যাপচা।

এই সাইটের কাছে আপনার কাছে একটি সমাধান রয়েছে বলে মনে হচ্ছে: jQuery: আউটআরএইচটিএমএল | Yelotofu

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

Comments

আমি এটি দেখেছি কিন্তু এটি এড়াতে চাইছিলাম কারণ এটি হ্যাক হচ্ছিল বলে মনে হয়েছিল এবং এর চেয়ে আরও ভাল উপায় হওয়া উচিত ছিল তবে এটি ভাল কাজ করে। ধন্যবাদ।

— রায়ান

$ ('[নির্বাচক]') [0] .উটার এইচটিএমএল

— ড্রাগন

@ হাইড্রোগন: সচেতন হন যে outerHTMLফায়ারফক্সে কেবল 11 সংস্করণ (মার্চ ২০১২) থেকে সমর্থিত।

— ব্লেইস

@ পেভিওয়েজ: ফায়ারফক্সের প্রতিরক্ষা: outerHTMLমাইক্রোসফ্ট দ্বারা উদ্ভূত একটি মালিকানাধীন বৈশিষ্ট্য, ডাব্লু 3 সি স্ট্যান্ডার্ড নয়। (মজাদার ঘটনা: innerHTMLশুধুমাত্র এইচটিএমএল 5 এর পরে মানক করা হয়েছে )

— ব্লেইজ করুন

খাঁটি জেএসel.outerHTML || document.createElement('div').appendChild( el.cloneNode( true ) ).parentNode.innerHTML

— রব

Answer 2

আমি বিশ্বাস করি যে বর্তমানে (5/1/2012), সমস্ত বড় ব্রাউজারগুলি বহিরাগত এইচটিএমএল ফাংশন সমর্থন করে। আমার কাছে মনে হচ্ছে এই স্নিপেট যথেষ্ট। আমি ব্যক্তিগতভাবে এটি মুখস্ত করতে পছন্দ করব:

// 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

@ সালমানপিকে ফায়ারফক্স ২০১১-১১-১১ পর্যন্ত এই সম্পত্তিটি সমর্থন করে নি। bugzilla.mozilla.org/show_bug.cgi?id=92264 এখনও 3.6 এ প্রচুর ব্যবহারকারী আটকে আছে। আমি মনে করি যে এটি কেন কোনও স্থানীয় নেভিগেশন কার্যকারিতার চেয়ে jQuery ব্যবহার করা বেছে নেয় তার একটি নিখুঁত উদাহরণ।

— লুসিফার স্যাম

@ লুসিফারসাম ফায়ারফক্স ৩.6-এর জিএস.স্ট্যাটকৌনটার ডট কম অনুসারে গ্লোবাল মার্কেট শেয়ার রয়েছে However তবে, গত months মাসে (ডিসেম্বর '11-মে '12) ফলাফলগুলি ফিল্টার করে এবং মার্কিন যুক্তরাষ্ট্রে এটি তাদের শীর্ষ 12 তালিকার বাইরে ফেলেছে (3 এর নীচে %)। আমি এই উইন্ডোটি বেছে নিয়েছি কারণ এই নিবন্ধটি জানুয়ারী 2012 এর পরে এফএফ 3.6 এর ব্যবহার উল্লেখযোগ্যভাবে হ্রাস পেয়েছে this এই তথ্যটি দেওয়া হয়েছে, আমি পিছনের দিকের সামঞ্জস্যের উপর সহজ কোডের জন্য আমার সমাধানটির সাথে দাঁড়িয়ে আছি।

— এরিক হু

আরও একমত হতে পারে না। এটি এখানে সঠিক উত্তর, লোকেরা যে পরামর্শ দিচ্ছে তা নয়। আমি যে উপাদানটি নির্বাচন করেছি তার মধ্যে আমি রাখতে চাই এমন বৈশিষ্ট্য রয়েছে যা অন্য উত্তরগুলির দ্বারা হারিয়ে যায়। হেইল, এটি এমনকি আইই তে কাজ করে!

— ম্যাথু বনিগ

নং ফায়ারফক্স 11 13 মার্চ, 2012 অবধি প্রকাশ করা হয়নি (এখনই স্থির), এই লিখনটি হিসাবে এক বছরেরও কম আগে। JQuery এর অন্যতম সুবিধা হ'ল এটি পুরানো ব্রাউজারগুলিকে সমর্থন করে। আমি মনে করি কমপক্ষে এক বছর সমর্থন করা যুক্তিসঙ্গত, এবং কিছু সাইট স্পষ্টতই আরও চাইবে (মনে রাখবেন, jQuery আইআই 6 সমর্থন করে)।

— ম্যাথু ফ্ল্যাশেন

@ এরিকহু স্ট্যাটকাউন্টারে আরও জানিয়েছে আইই 8 এর 9.3% বিশ্বব্যাপী শেয়ার রয়েছে share তবুও আমার কয়েকটি ওয়েবসাইট 40% চিহ্নের কাছাকাছি। এটি সমস্ত আপেক্ষিক এবং ওয়েবসাইট থেকে ওয়েবসাইটে প্রচুর পরিমাণে পরিবর্তিত হয়, ফায়ারফক্স ৩. still এখনও আমার কয়েকটি ওয়েবসাইটে প্রায় 10% এর অ্যাকাউন্টে রয়েছে। গ্লোবাল মার্কেটশেয়ার মানে কিছুই নয়। এটি আপনার ওয়েবসাইট দর্শকদের সম্পর্কে।

— জর্জ রিথ

Answer 3

এটির জন্য কোনও ফাংশন উত্পন্ন করার দরকার নেই। কেবল এটির মতো করুন:

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

(আপনার ব্রাউজারের কনসোলটি কীভাবে লগ হয়েছে তা দেখায় 2009 প্রায় ২০০৯ সালের পরের সর্বশেষতম ব্রাউজারগুলিতে এই বৈশিষ্ট্য রয়েছে))

যাদুটি এটাই শেষ:

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

ক্লোনটির অর্থ আপনি আসলে ডোমকে ঝামেলা করছেন না। এটি ছাড়াই চালান এবং আপনি pসমস্ত হাইপারলিঙ্কগুলির আগে / পরে inোকানো ট্যাগগুলি দেখতে পাবেন (এই উদাহরণে), যা অনাকাঙ্ক্ষিত। সুতরাং, হ্যাঁ, ব্যবহার করুন .clone()।

এটি যেভাবে কাজ করে তা হ'ল এটি প্রতিটি aট্যাগ নেয় , র‌্যামে এটির একটি ক্লোন তৈরি করে, pট্যাগ দিয়ে মোড়ানো , এর পিতামাতাকে ( pট্যাগটির অর্থ ) পায় এবং তারপরে এর innerHTMLসম্পত্তিটি পায় ।

সম্পাদনা : পরামর্শ নিয়েছেন এবং divট্যাগগুলিকে ট্যাগগুলিতে পরিবর্তন করেছেন pকারণ এটি টাইপিং কম হয় এবং একই কাজ করে।

Comments

আমি ভাবছি কেন jQuery টিম একটি বহিরাগত html () পদ্ধতি যুক্ত করে না?

— ডনি ভি।

@ ডেরেক, তাতে কিছু আসে যায় না। আমি এর অভ্যন্তরে কিছু পাওয়ার জন্য একটি র‍্যাপার হিসাবে ডিআইভি ব্যবহার করছি।

— ভলমাইক

। .clone () মোড়ানো ( '<p> যে') পিতা বা মাতা () এইচটিএমএল ()।। সংক্ষিপ্ত

— উওমুর গমহান

হ্যাঁ, কম কীস্ট্রোক রয়েছে এবং একই প্রভাব অর্জন করে।

— ভোলোমাইক

একটি সাধারণ সমাধানের জন্য পি এর পরিবর্তে ডিআইভি ব্যবহার করা ভাল - সমস্ত উপাদানগুলিকে বৈধ এইচটিএমএল হিসাবে পিতে আবৃত করা যায় না।

— ব্লেজমোনজার

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

অন্যান্য উত্তরের তুলনায় খুব ঝরঝরে এবং ছোট কোড। প্রশ্ন: অন্যান্য উত্তরে উল্লিখিত হিসাবে এর কি এই একই বহিরাগত এইচটিএমএল বিধিনিষেধ রয়েছে? এটি কি এফএফ <11 এ কাজ করে?

— ম্যাক্রোম্যান

ভাল কাজ করে, এটি এখানে সেরা সমাধান হতে পারে। ব্রাউজারগুলি যতদূর যায় এটি বহিরাগত এইচটিএলএমের মতো উপযুক্ত হতে হবে। প্রোপ () পদ্ধতিটি কেবলমাত্র কেবলমাত্র বাইরের এইচটিএমএল সম্পত্তি পাচ্ছে।

— টম টম

এই সমাধানটি আরও ভাল, তবে জেকারি ১.6.১.২০১১ সালে প্রকাশিত হয়েছিল। প্রশ্নটি (এবং আমার উত্তর) ২০১০ সালের।

— ডেভিড ভি।

আমার জন্য "$ ('[নির্বাচক]') [0] .উটার এইচটিএমএল;" কোনও ক্ষেত্রে কাজ করেনি, তবে "$ ('# আইটেম-থেকে-নির্বাচিত হতে হবে')। হ্যাঁ!

— এডুয়ার্ডো লুসিও

। $ ( '# টি আইটেম টু করা-নির্বাচিত') ATTR ( 'outerHTML'); // ** পূর্ববর্তী jQuery এর জন্য

— Meetai.com

Answer 5

JQuery প্রসারিত করুন:

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

এবং এটি এর মতো ব্যবহার করুন: $("#myTableRow").outerHTML();

Comments

এই সমাধানটির সাথে ছোট সমস্যা: আপনি () মোড়ানোর আগে আপনার () ক্লোন করা দরকার, অন্যথায় আপনি নথিতে <অতিরিক্ত> মোড়ক রেখে যাচ্ছেন।

— mindplay.dk

ধন্যবাদ, mindplay.dk - আমি আপনার পরামর্শ অন্তর্ভুক্ত করতে কোড সম্পাদনা করেছি .. ভাল ধরা। :)

— জেসিকা

এটিকে পরিবর্তিত করার বিষয়ে কী: return $('<div>').append(this.clone()).html();পয়েন্টে এটি কেবল আরও কিছুটা বেশি।

— জাস্টিন ওয়ার্কেন্টিন

আপনার প্রথমে আউটআরএইচটিএমএল পরীক্ষা করা উচিত এবং এটি সমর্থন করে এমন ব্রাউজারগুলির জন্য এটি ব্যবহার করুন

— জেমস ওয়েস্টগেট

এটি আমার মতো লোকদের জন্য দুর্দান্ত যারা jQuery অবজেক্টস এবং .appendTo () এবং .append () ফাংশনগুলি ব্যবহার করে AJAX প্রতিক্রিয়াগুলিতে এইচটিএমএল তৈরি করতে চান। .outerHTML আমার পরীক্ষায় যা দেখেছি সেগুলি থেকে সেগুলির জন্য কাজ করে না। অন্য কেউ হয়ত আরও পরীক্ষা করে দেখতে চান তবে আমার হাতে সময় নেই।

— শান কেন্ডেল

Answer 6

আমি অর্পানের সাথে একমত (ডিসেম্বর 13 '10 5:59)।

আপনি এটি ক্লোন ব্যবহার করবেন না বলে এটি করার তার উপায়টি এটি করার আরও অনেক ভাল উপায়। ক্লোন পদ্ধতিটি খুব সময়সাপেক্ষ, আপনার যদি শিশু উপাদান থাকে এবং অন্য কারও মনে হয় না যে IE আসলে outerHTMLবৈশিষ্ট্যটি আছে (হ্যাঁ আইই আসলে কিছুটা কৌশল অবলম্বন করেছে)।

তবে আমি সম্ভবত তাঁর স্ক্রিপ্টটি কিছুটা আলাদা তৈরি করব:

$.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এর, আমি একটি অ ক্লোন সমাধান প্রয়োজন নেই, এবং এই স্পট ছিল।

— Shpigford

outerHTMLইন্টারনেট এক্সপ্লোরার ছাড়াও ক্রোম দ্বারা সমর্থিত হওয়ায় দেশীয় যেখানে ব্যবহার করা যায় তার জন্য +1 ।

— অ্যান্ডি ই

যদি (! ('আউটআর এইচটিএমএল' in $ t [0])) সতর্কতা ('damশ্বর অভিশাপ, আপনার ব্রাউজার আপডেট করুন');

— psycho brm

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) { }- যেখানে ফেরতের মান উপাদানটির জন্য নতুন এইচটিএমএল হয়ে উঠবে (যদি না falseফেরানো হয়)।
• একটি স্ট্রিং, যা প্রতিটি এলিমেন্টের HTML এর জায়গায় সেট করা হবে।

আরও তথ্যের জন্য jQuery ডক্সের জন্য দেখুন html()।

Comments

এটি jQuery কোর এ যুক্ত করা উচিত যাতে লোকেরা এটি সম্পর্কে চিন্তা করার প্রয়োজন না হয়। আমার একমাত্র প্রশ্ন হ'ল মোড়ক () / আনপ্রেপ () ক্লোন () এর চেয়ে ভাল বা খারাপ পারফরম্যান্স হওয়ার সম্ভাবনা রয়েছে কিনা?

— আইএমএসওপি

আইএমএসওপি: সাধারণত মোড়ানো / আনওয়্যারপ দ্রুত হবে কারণ ক্লোনটি সমস্ত শিশু উপাদান এবং উপাদানটির বৈশিষ্ট্যগুলি অনুলিপি করতে হয়। মোড়ানো () কেবলমাত্র একটি একক উপাদান তৈরি করে এবং আন-র্যাপ () এটি ধ্বংস করে, অন্যান্য সমস্ত উপাদান সবেমাত্র সরানো হয় যা বেশিরভাগ সময় মোটামুটি দ্রুত অপারেশন হয় is

— অ্যান্ডি ই

Answer 8

আপনি get (jQuery অবজেক্টের সাথে মিলিত ডোম উপাদানগুলি পুনরুদ্ধার করুন use) ব্যবহার করতে পারেন ।

উদাহরণ:

$('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()
};

একাধিক পছন্দ এবং সমস্ত মিলিত উপাদানগুলির বহিরাগত এইচটিএমএল ফিরিয়ে দিন।

$('input').outerHTML()

ফিরে

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

Answer 9

সম্পূর্ণ jQuery প্লাগইন হিসাবে তৈরি করতে .outerHTML, যে কোনও জেএস ফাইলে নিম্নলিখিত স্ক্রিপ্ট যুক্ত করুন এবং আপনার শিরোনামে 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);

এটি আপনাকে কেবল একটি উপাদানের বহিরাগত এইচটিএমএলই পেতে দেয় না, একই সাথে একাধিক উপাদানের অ্যারে রিটার্নও পেতে পারে! এবং উভয় 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

যেখানে আইডি হল সেই উপাদানটির আইডি যা আপনি খুঁজছেন of

Comments

$("#" + id).attr("id")অবিশ্বাস্যভাবে অনর্থক। আপনার যদি ইতিমধ্যে কোনও ভেরিয়েবলে আইডি থাকে, তবে আপনি ডোম থেকে উপাদানটি টানতে কোনও jquery নির্বাচনকারী কেন ব্যবহার করছেন, তার আইডি বৈশিষ্ট্যটি জিজ্ঞাসা করছেন?

— স্যাম ডুফেল

Answer 11

আমি জেসিকার সলিউশন (যা জোশ সম্পাদিত) ফায়ারফক্সে কাজ করার জন্য বাইরের এইচটিএমএলটি ব্যবহার করেছিলাম। তবে সমস্যাটি হ'ল আমার কোডটি ভেঙে যাচ্ছিল কারণ তার সমাধানটি উপাদানটিকে একটি ডিআইভিতে আবৃত করে। কোডের আরও একটি লাইন যুক্ত করা এই সমস্যার সমাধান করেছে।

নিম্নলিখিত কোডটি আপনাকে ডোম গাছটি অপরিবর্তিত রেখে বহিরাগত এইচটিএমএল দেয়।

$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;
    }
}

এবং এটি এর মতো ব্যবহার করুন:; ("# মাইডিভ") outer আউটআর এইচটিএমএল ();

আশা করি কেউ এটিকে কাজে লাগবে!

Comments

@ মাইন্ডপ্লে যেমন মন্তব্য করেছেন ঠিক তেমন ক্লোন ব্যবহার করুন তাঁর মন্তব্যে- এটি আরও সহজ

— ইয়ারিন

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>। এটি সর্বশেষ সারিটির একটি অনুলিপি তৈরি করে এবং এটি একটি নতুন সর্বশেষ সারি হিসাবে সন্নিবেশ করায়। এটি আই 7 তেও কাজ করে , যখন [0].outerHTMLপদ্ধতিটি আই 7-তে অ্যাসাইনমেন্টের অনুমতি দেয় না

Answer 14

node.cloneNode () হ্যাকের মতো মনে হয় না। আপনি নোডটি ক্লোন করতে এবং এটি যে কোনও পছন্দসই প্যারেন্ট উপাদানগুলিতে সংযোজন করতে পারেন এবং এটির উপর নিয়মিত এক্সপ্রেশন চালানো বা ডিওএম-এ যুক্ত করার পরিবর্তে স্বতন্ত্র বৈশিষ্ট্যগুলিও ম্যানিপুলেট করে এটিকে ম্যানিপুলেট করতে পারেন, তারপরে এটি ওয়ার্ডপ্রেসগুলি ম্যানিপুলেট করুন।

এটি বলেছিল, আপনি এটির একটি HTML স্ট্রিং উপস্থাপনা তৈরি করতে উপাদানটির বৈশিষ্ট্যগুলি নিয়েও পুনরাবৃত্তি করতে পারেন । মনে হয় সম্ভবত কোনও বাহ্যিক এইচটিএমএল ফাংশনটি কীভাবে প্রয়োগ করা হবে তাতে কোনও যোগ করার জন্য jQuery ছিল।

Answer 15

আমি ভলোমাইক এর সমাধানটি জেসিকা দ্বারা আপডেট করেছি। উপাদান উপস্থিত রয়েছে কিনা তা সবেমাত্র একটি চেক যুক্ত করে এবং তা না হলে এটিকে ফাঁকা করে দেয়।

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

অবশ্যই এটি ব্যবহার করুন:

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

Answer 16

আপনি এখানে একটি ভাল .outerH HTML () বিকল্পটি পেতে পারেন https://github.com/darlesson/jquery-outerhtml ।

.Html () এর বিপরীতে যা কেবলমাত্র উপাদানটির এইচটিএমএল বিষয়বস্তু ফেরত দেয়। শিকল।

উদাহরণগুলি উপরের ইউআরএলটিতেও দেখা যায়।

Answer 17

নোট করুন যে জোশের সমাধান কেবল একটি একক উপাদানের জন্য কাজ করে।

তর্কযুক্তভাবে, "বাহ্যিক" এইচটিএমএল কেবল তখনই আপনার বোধগম্য হয় যখন আপনার একটি একক উপাদান থাকে তবে এমন পরিস্থিতি রয়েছে যেখানে এইচটিএমএল উপাদানগুলির একটি তালিকা নেওয়া এবং সেগুলি মার্কআপে রূপান্তরিত করা বোধগম্য।

জোশের সমাধানটি প্রসারিত করে, এটি একাধিক উপাদান পরিচালনা করবে:

(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 "getter" পদ্ধতিগুলি কেবলমাত্র প্রথম উপাদানটির জন্য ডেটা ফেরত দেয়, তাই এই আচরণের সাথে মেলে এটি আরও অর্থবোধ করে।

— অ্যান্ডি ই

আমি মনে করি আমি পরিষ্কারভাবে বলেছি কেন এটি এইভাবে কাজ করে? আপনার কাছে উপাদানগুলির তালিকা থাকলে এটি কুৎসিত / জটিল কোড তৈরি করে - যদি কোনও কারণে আপনি কেবলমাত্র প্রথম উপাদানটির জন্য মার্কআপ চান, কেবল ব্যবহার করুন: আপনার নির্বাচকটিতে প্রথম।

— mindplay.dk

অবশ্যই, ঠিক যেমন আপনি একাধিক উপাদানগুলির এইচটিএমএল পেতে প্রত্যেকের সমাধান সহ মানচিত্রটি ব্যবহার করতে পারেন। আমি যা বলছিলাম তা হ'ল মানক jQuery পদ্ধতির আচরণের সাথে এটি আরও বেশি সামঞ্জস্যপূর্ণ।

— অ্যান্ডি ই

Answer 18

remove()অস্থায়ী ডিওএম অবজেক্ট যুক্ত করে একই রকম সমাধান আনোথ করুন ।

Answer 19

বাইরের এইচটিএমএলটি টোকিমন সলিউশন (ক্লোন ছাড়াই), এবং বাইরের এইচটিএমএল 2 জেসিকা সলিউশন (ক্লোন) হওয়ায় এই সহজ পরীক্ষাটি করেছি I

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
সেমি বহিরাগত এইচটিএমএল 2: 439 মিমি

তবে আমরা যদি দেশীয় বাইরের এইচটিএমএল ফাংশন ছাড়াই টোকিমনের সমাধানটি ব্যবহার করি (যা সম্ভবত প্রায় প্রতিটি ব্রাউজারে সমর্থিত)

আমরা পেতে

আউটআরএইচটিএমএল: 594ms
বহিরাগত এইচটিএমএল 2: 332 মিমি

এবং বাস্তব বিশ্বের উদাহরণগুলিতে আরও লুপ এবং উপাদান থাকতে পারে, তাই নিখুঁত সংমিশ্রণটি হবে

$.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

এখানে একটি খুব অনুকূল outerHTML প্লাগইন jQuery জন্য: ( 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 ইতোমধ্যে আমাদের 'রিপ্লেসময়েথ' দিয়ে ...

@ মাইন্ডপ্লে => আপনি কেন সমস্ত বাহ্যিক এইচটিএমএল এ যোগ দিচ্ছেন? jquery.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

এটি ডোমের উপাদান পরিবর্তন করার জন্য দুর্দান্ত তবে এটি এইচটিএমএল স্ট্রিংয়ের মধ্যে jquery এ যাওয়ার সময় কার্যকর হয় না:

$('<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

আমি আমার ইস্যুটির উত্তর খুঁজতে গিয়েছিলাম যা হ'ল আমি টেবিলের সারিটি সরিয়ে আবার টেবিলের নীচে ফিরে যুক্ত করার চেষ্টা করছিলাম (কারণ আমি গতিশীলভাবে ডেটা সারি তৈরি করছিলাম তবে একটি 'নতুন যুক্ত করা' প্রদর্শন করতে চেয়েছিলাম নীচে রেকর্ড 'টাইপ সারি)।

আমার একই সমস্যা ছিল, এটি এটি অন্তর্নির্বাহী HTML ফিরিয়ে দিচ্ছিল তাই টিআর ট্যাগগুলি অনুপস্থিত ছিল যা সেই সারিটির আইডি ধারণ করেছিল এবং এর অর্থ এই পদ্ধতিটি পুনরাবৃত্তি করা অসম্ভব।

আমি যে উত্তরটি পেয়েছি তা হ'ল jquery remove()ফাংশন আসলে উপাদানটি ফেরত দেয়, এটি একটি বস্তু হিসাবে সরিয়ে দেয়। সুতরাং, সারিটি সরাতে এবং পুনরায় যুক্ত করতে এটি এত সহজ ছিল ...

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

আপনি যদি অবজেক্টটি অপসারণ না করে তবে অন্য কোথাও অনুলিপি করতে চান তবে clone()পরিবর্তে ফাংশনটি ব্যবহার করুন।

Answer 26

শর্টহ্যান্ড হিসাবে jQuery প্লাগইন সরাসরি পুরো উপাদান এইচটিএমএল পেতে:

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

এবং এটি এর মতো ব্যবহার করুন: $(".element").outerHTML();

Answer 27

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

যেখানে 'x' হ'ল নোড সংখ্যা, প্রথমটি 0 হিসাবে শুরু হয়, আপনি যদি একটি নির্দিষ্ট নম্বর পাওয়ার চেষ্টা করছেন তবে সঠিক নোডটি আপনার নেওয়া উচিত get আপনার যদি চাইল্ড নোড থাকে তবে আপনার যা চান তার উপর একটি আইডি লাগিয়ে রাখা উচিত, তবে এটিতে কেবল শূন্য। এই পদ্ধতিটি ব্যবহার করে এবং কোনও 'এক্স' আমার পক্ষে ভাল কাজ করে নি।

Comments

লোকেরা এটিকে ভোট দিচ্ছে, কোনও মন্তব্য দেবেন? আমি কোডটি প্যারেন্টে চলে যেতে চাইছি, তারপরে বিষয়বস্তুর এইচটিএমএল পাবেন - কেবলমাত্র .html()প্রদত্ত উপাদানটিতে কাজ না করে। এই কাজ করে এবং আমি কেন এটি হয় না তার একটি ব্যাখ্যা চাই।

— ভ্যাপকিগুয়ে

Answer 28

সহজ সমাধান।

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

Answer 29

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

সম্ভবত আমি আপনার প্রশ্নটি সঠিকভাবে বুঝতে পারছি না তবে এটি নির্বাচিত উপাদানটির মূল উপাদানটির এইচটিএমএল পাবে।

আপনি কি এই পরে আছেন?

Comments

আকস্মিকভাবে না, কারণ সেই পিতামাতার যদি অন্য সন্তান থাকে তবে সেও এইচটিএমএল পাবে।

— ডেভিড ভি।

...তিনি কি বললেন. আমি নিজেই উপাদানটি খুঁজছি, এটি নয় এবং এর সমস্ত পিতামাতার অন্যান্য বাচ্চাদের। এটি কীভাবে দুটি ভোট পেয়েছে ???

— রায়ান