jQuery ধারক নিজেই ধারক সহ এইচটিএমএল পান

Question

আমি কীভাবে '# কনটেইনার' সহ এইচটিএমএল পাব এবং এর ভিতরে কী আছে তা নয়।

<div id="container">
 <div id="one">test 1 </div>
 <div id="two">test 2 </div>
 <div id="three">test 3 </div>
 <div id="four">test 4 </div>
</div>

আমার কাছে এটি আছে যা # কন্টেইনারের অভ্যন্তরে এইচটিএমএল পায়। এটিতে # কনটেইনার উপাদানটি নিজেই অন্তর্ভুক্ত নয়। আমি কি করতে চাই

var x = $('#container').html();
$('#save').val(x);

পরীক্ষা করে দেখুন http://jsfiddle.net/rzfPP/58/

Comments

আপনি অন্য ধারকের ভিতরে পাত্রে রাখতে পারেন এবং এই ধারকগুলি এইচটিএমএল পেতে পারেন ... তবে এটি কিছুটা হ্যাকি বলে মনে হচ্ছে। সম্ভবত আমরা যদি সমস্যাটি সম্পর্কে আরও কিছু জানতাম, তবে আমরা একটি কার্যক্ষম সমাধান নিয়ে আসতে পারি? আপনি এইচটিএমএল পূর্ণ একটি পাঠ্য অঞ্চল দিয়ে কি করছেন?

— প্যাট্রিসিয়া

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

— ইয়ান ম্যাকিনন

Answer 1

আপনি যদি একটি ডামি Pট্যাগে ধারকটি মুড়ে রাখেন তবে আপনি ধারক এইচটিএমএলও পাবেন।

আপনার যা করা দরকার তা হ'ল

var x = $('#container').wrap('<p/>').parent().html();

Http://jsfiddle.net/rzfPP/68/ এ কাজের উদাহরণ পরীক্ষা করুন

হয়ে unwrap()গেলে <p>ট্যাগটিতে আপনি যুক্ত করতে পারেন

$('#container').unwrap();

Comments

@ এমসি 10 আমরা কেবল ক্লোন () ব্যবহার করতে পারি এবং আপনাকে তৈরি অতিরিক্ত উপাদানগুলির বিষয়ে চিন্তা করতে হবে না। var x = $('#container').clone().wrap('<p/>').parent().html();। মোড়কের ধারণাটি দুর্দান্ত এবং খুব জটিল জটিল বরাদ্দ করা হয় তবে বেশিরভাগ সমাধান সরবরাহ করা হয়।

— গোলাপী

ফায়ারফক্স ইস্যুটির মেয়াদোত্তীর্ণ তাই আমি @ মাইকএম উত্তরটি ভোট দেওয়ার পরামর্শ দিচ্ছি কারণ এটি খাঁটি জেএসে রয়েছে।

— রব

কেন একটি <p>ট্যাগ? একটি <div>আরও বুদ্ধি না?

— মার্টিন বুর্চ

এটি একটি অনেক সহজ সমাধান আছে। আমার উত্তর দেখুন।

— 1.44mb

Answer 2

var x = $('#container').get(0).outerHTML;

আপডেট : এটি এখন ফায়ারফক্স 11 দ্বারা সমর্থিত (মার্চ 2012)

অন্যরা যেমন উল্লেখ করেছে, এটি ফায়ারফক্সে কাজ করবে না। যদি আপনার ফায়ারফক্সে এটি কাজ করার প্রয়োজন হয়, তবে আপনি এই প্রশ্নের উত্তরটি একবার দেখে নিতে পারেন: jQuery- এ, এইচটিএমএল () বা পাঠ্য () এর অনুরূপ এমন কোনও ফাংশন রয়েছে কি তবে ম্যাচের উপাদানটির পুরো বিষয়বস্তু ফিরিয়ে দেয়?

Comments

এটি ফায়ারফক্সে কাজ করে এবং এটি বর্তমানে গ্রহণযোগ্য সমাধানের চেয়ে ভাল।

— luqita

এটি করার এটি একটি মার্জিত উপায়, ভাল তবে গ্রহণযোগ্য উত্তর যা কেবল একটি নোংরা হ্যাক ছিল

— মিনহাজুল

এটি নিখুঁত।

— গৌরব আগরওয়াল

এটি সঠিক উত্তর কারণ ডিভ বা পি দিয়ে প্যারেন্ট ট্যাগটি মোড়ানো খারাপ ধারণা। আপনার সিএসএস বিরতি হতে পারে। বিশেষত যখন আপনি বুটস্ট্র্যাপ ব্যবহার করছেন (যেমন ফর্ম-সারি)। সুতরাং এই উত্তরটি বেশ ভাল good

— সুধীর কে গুপ্ত

Answer 3

আমি এটি ব্যবহার করতে পছন্দ করি;

$('#container').prop('outerHTML');

Comments

এটি আমার কাছে সেরা সমাধানের মতো বলে মনে হচ্ছে এর জন্য কোনও ডোম ম্যানিপুলেশন বা সিউডো ডোম ম্যানিপুলেশন (মোড়ানোর পদ্ধতিগুলি) দরকার নেই। এবং jquery অবজেক্টটির ইতিমধ্যে সম্পত্তি রয়েছে।

— নিমিনেন

এই সমাধানটি পছন্দ করুন

— সামিরা কুমারসিংহ

Answer 4

var x = $('#container')[0].outerHTML;

Comments

ফায়ারফক্স ইস্যুটির মেয়াদ উত্তীর্ণ তাই আমি এই উত্তরটি ভোট দেওয়ার পরামর্শ দিই।

— রব

.ক্লোন () ব্যবহার করে কাজ করে তবে এটি বেশ পরিষ্কার, ইমো। গৃহীত উত্তরটি ডম = খারাপের মধ্যে নতুন উপাদান তৈরি করে।

— পিট

Answer 5

$('#container').clone().wrapAll("<div/>").parent().html();

আপডেট: বাইরেরএইচটিএমএল এখন ফায়ারফক্সে কাজ করে তাই অন্য উত্তরটি ব্যবহার করুন যদি না আপনার ফায়ারফক্সের খুব পুরানো সংস্করণ সমর্থন করার প্রয়োজন হয়

Comments

আউটআর এইচটিএমএল সম্পত্তি ফায়ারফক্সে কাজ করে না তাই আপনার এটি ক্লোন দিয়ে করা দরকার

— রবার্ট নোক

Answer 6

ওল্ডি কিন্তু গোল্ডি ...

যেহেতু ব্যবহারকারী jQuery জন্য জিজ্ঞাসা করছেন, তাই আমি এটিকে সহজ রাখব:

var html = $('#container').clone();
console.log(html);

ফিডল এখানে।

Comments

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

— অয়নঅফটাইম

Answer 7

$.fn.outerHtml = function(){
    if (this.length) {
        var div = $('<div style="display:none"></div>');
        var clone =
        $(this[0].cloneNode(false)).html(this.html()).appendTo(div);
        var outer = div.html();
        div.remove();
        return outer;
    }
    else {
        return null;
    }
};

http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element 12-1-2010 থেকে

Answer 8

ফায়ারফক্স বাইরের এইচটিএমএল সমর্থন করে না , সুতরাং এটি সমর্থন করতে আপনাকে কোনও ফাংশন সংজ্ঞায়িত করতে হবে:

function outerHTML(node) {
    return node.outerHTML || (
        function(n) {
            var div = document.createElement('div');
            div.appendChild( n.cloneNode(true) );
            var h = div.innerHTML;
            div = null;
            return h;
        }
    )(node);
}

তারপরে, আপনি বাইরের এইচটিএমএল ব্যবহার করতে পারেন:

var x = outerHTML($('#container').get(0));
$('#save').val(x);

Answer 9

var x = $($('div').html($('#container').clone())).html();

Comments

আপনি একটি বিবৃতিতে 3 jquery অবজেক্ট তৈরি করছেন। যদিও এটি কাজ করে, এটি একটি ওভারকিল।

— পিংকি

Answer 10

একটি উদাহরণ সহ সহজ সমাধান:

<div id="id_div">
  <p>content<p>
</div>

এই ডিআইভিকে অন্যান্য ডিআইভিতে আইডি = "অন্যান্য_ডিব_আইডি" দিয়ে সরান

$('#other_div_id').prepend( $('#id_div') );

শেষ

Comments

ওপি একটি jQuery অবজেক্ট দ্বারা প্রতিনিধিত্ব করা কাঁচা এইচটিএমএলকে অনুরোধ করছে, যেখানে এই পদ্ধতিটি jQuery অবজেক্টকে এক জায়গা থেকে অন্য জায়গায় নিয়ে যায়।

— সাইমন রব