DOM এ জাভাস্ক্রিপ্ট চলমান উপাদান

Question

ধরা যাক <div>একটি পৃষ্ঠায় আমার তিনটি উপাদান রয়েছে। আমি কীভাবে প্রথম এবং তৃতীয় অবস্থানের অদলবদল করতে পারি <div>? jQuery ঠিক আছে।

Answer 1

JQuery সঙ্গে তুচ্ছ

$('#div1').insertAfter('#div3');
$('#div3').insertBefore('#div2');

আপনি যদি বারবার এটি করতে চান তবে আপনাকে বিভিন্ন নির্বাচক ব্যবহার করতে হবে যেহেতু ডিভগুলি চারপাশে সরে যাওয়ার সাথে সাথে তাদের আইডিগুলি বজায় রাখবে।

$(function() {
    setInterval( function() {
        $('div:first').insertAfter($('div').eq(2));
        $('div').eq(1).insertBefore('div:first');
    }, 3000 );
});

Comments

@ আইয়নট - মূল বিষয়টি এটি উপাদানগুলির আপেক্ষিক অবস্থানের উপর নির্ভর করে। একবার আপনি অর্ডার পরিবর্তন করলে আপনি তাদের আইডির সাহায্যে আর প্রথম এবং তৃতীয়টি খুঁজে পেতে পারবেন না এবং অন্য কোনও উপায়ে কাজ করতে হবে। আমার উত্তরটি কেবলমাত্র অনুরোধকৃত কার্য সম্পাদন করার পদ্ধতিগুলির কার্যকারিতা চিত্রিত করার জন্য বোঝানো হয়েছিল, একটি নির্বিচার সংখ্যক সেটগুলিতে প্রথম এবং তৃতীয় ডিভগুলি অদলবদলের জন্য বিস্তৃত সমাধান না হয়ে।

— tvanfosson

হাই ছেলেরা, একটি তাত্ক্ষণিক প্রশ্ন: উপরের jquery ফাংশনটি শেষ হয়ে যাওয়ার পরে কি আসল ডোম রাজ্যে ফিরে আসার সহজ উপায় আছে?

— বিকিতা

@ ভিকিতা - হ্যাঁ, আসল এইচটিএমএল সংরক্ষণ করুন এবং তারপরে পুনরুদ্ধার করুন। কোনও হ্যান্ডলারের যদি উচ্চতর উপাদানকে অর্পণ করার পরিবর্তে সরাসরি প্রয়োগ করা হয় তবে আপনাকে পুনরায় আবেদন করতে হবে। উদাহরণস্বরূপ,var html = $('#container').html(); ...; $('#container').html(html);

— tvanfosson

Answer 2

এ জাতীয় তুচ্ছ কাজের জন্য একটি লাইব্রেরি ব্যবহার করার দরকার নেই:

var divs = document.getElementsByTagName("div");   // order: first, second, third
divs[2].parentNode.insertBefore(divs[2], divs[0]); // order: third, first, second
divs[2].parentNode.insertBefore(divs[2], divs[1]); // order: third, second, first

এটি সত্য যে অ্যাকাউন্টটি গ্রহণ করে যে getElementsByTagNameকোনও লাইভ নোডলিস্ট প্রত্যাবর্তন করে যা স্বয়ংক্রিয়ভাবে আপডেট হয় DOM- র উপাদানগুলি যাতে ম্যানিপুলেট করা হয় তার ক্রম প্রতিবিম্বিত করতে।

আপনি এটি ব্যবহার করতে পারেন:

var divs = document.getElementsByTagName("div");   // order: first, second, third
divs[0].parentNode.appendChild(divs[0]);           // order: second, third, first
divs[1].parentNode.insertBefore(divs[0], divs[1]); // order: third, second, first

এবং অন্যান্য বিভিন্ন সম্ভাব্য অনুমতি রয়েছে, যদি আপনি পরীক্ষার মতো মনে করেন:

divs[0].parentNode.appendChild(divs[0].parentNode.replaceChild(divs[2], divs[0]));

উদাহরণ স্বরূপ :-)

Comments

সত্য, তবে jQuery এর মতো কিছু সরবরাহ করে এমন কমনীয়তা এবং পাঠযোগ্যতার সাথে তর্ক করা শক্ত - বাক্সের বাইরে বর্ধিত ক্ষমতাগুলি উল্লেখ না করা।

— ক্রেজি জো মল্লয়ে

হ্যাঁ, তবে কে কেবল এই একটি কাজ করে?

— tvanfosson

... বা পৃষ্ঠায় কেবল 3 ডিভ রয়েছে

— রায়ান ফ্লোরেন্স

@ প্রত্যেক ব্যক্তি: মূল প্রশ্নটি জিজ্ঞাসা করেছিল যে কীভাবে তিন পৃষ্ঠার পৃষ্ঠাতে তৃতীয় এবং প্রথম ডিভগুলি অদলবদল করা যায়। এটাই আমি উত্তর দিয়েছিলাম। যদি

— ওপিতে

যদি কেউ 2014 এ খুঁজছেন, দয়া করে এই উত্তরটি বিবেচনা করুন। jQuery তখনকার সময়ে দরকারী ছিল, কিন্তু এখন আর এটি তেমন কার্যকর হয় না, কারণ ব্রাউজারগুলি মানক করা হয়, তাই কেবল এত সাধারণ কাজটি করার জন্য একটি 80 কেবি লাইব্রেরি যুক্ত করার দরকার নেই। এছাড়াও, আপনি jQuery ব্যতীত চেষ্টা না করা অবধি

— ডিওএম

Answer 3

.আগপাছ

আধুনিক ভ্যানিলা জেএস ব্যবহার করুন! আগের চেয়ে ভাল / ক্লিনার পিতামাতাকে রেফারেন্স দেওয়ার দরকার নেই।

const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");

div2.after(div1);
div2.before(div3);

ব্রাউজার সমর্থন - অক্টোবর '20 এ 95% গ্লোবাল

Comments

কোনও ইন্টারনেট এক্সপ্লোরার এখনও সমর্থন করে না।

— Justnorris

পুরানো বা মানকতা অনুসারে ব্রাউজারগুলিতে লোককে সমর্থন করার জন্য আপনাকে কম রক্ষণাবেক্ষণযোগ্য কোড লিখতে হবে না। আপনি যদি এন্টারপ্রাইজে কাজ না করেন তবে অল্প কিছু ব্যবহারকারীর

— হাতছাড়া

অন্যান্য পদ্ধতিগুলি রক্ষণাবেক্ষণের ক্ষেত্রে ঠিক তেমনি কাজ করে, বিশেষত যখন একটি সুন্দর পরিষ্কার ফাংশন মোড়ানো হয়। আমি সবই আধুনিক কোড লেখার জন্য করছি তবে এটি রক্তপাতের প্রান্ত। ভবিষ্যতে কী ধারণ করে তা জেনে রাখা দুর্দান্ত তবে আমি সম্পর্কিত যে কোনও বিষয়কে অপছন্দ করি না কেন - আপনার সিদ্ধান্তগুলির প্রভাব কী তা জানা গুরুত্বপূর্ণ । এই ক্ষেত্রে - যে কোনও ব্রাউজারে একটি ভাঙা ওয়েব অ্যাপ্লিকেশন। যদি তা আপনার সাথে ঠিক থাকে - দুর্দান্ত! আমি মন্তব্যটি যুক্ত করেছি কেবল এটি

— গুগল করা

তাহলে ২ 27% ব্যবহারকারী কি কয়েকজন ব্যবহারকারী ? আমরা লক্ষ লক্ষ কথা বলছি!

— স্যান্ডরক

এক বছরে, এই সংখ্যাটি 10% এর কাছাকাছি হবে। এটি বেশিরভাগ এন্টারপ্রাইজ, সরকারী এবং পুরানো মোবাইল ডিভাইস। এর অর্থ সাধারণত ব্যক্তিগত-ব্যতীত ডিভাইস বা কম প্রযুক্তিগতভাবে ঝোঁকযুক্ত ব্যবহারকারী means উত্তরগুলি

— সন্ধানের

Answer 4

jQuery.fn.swap = function(b){ 
    b = jQuery(b)[0]; 
    var a = this[0]; 
    var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
    b.parentNode.insertBefore(a, b); 
    t.parentNode.insertBefore(b, t); 
    t.parentNode.removeChild(t); 
    return this; 
};

এবং এটি এর মতো ব্যবহার করুন:

$('#div1').swap('#div2');

আপনি jQuery ব্যবহার করতে না চাইলে আপনি সহজেই ফাংশনটি মানিয়ে নিতে পারেন।

Answer 5

var swap = function () {
    var divs = document.getElementsByTagName('div');
    var div1 = divs[0];
    var div2 = divs[1];
    var div3 = divs[2];

    div3.parentNode.insertBefore(div1, div3);
    div1.parentNode.insertBefore(div3, div2);
};

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

এটি কোন মানদণ্ডের উপর নির্ভর করে?

insertBefire বিদ্যমান শিশু নোড রেফচিল্ডের আগে নোড নতুনচিল্ড সন্নিবেশ করান। যদি রেফচাইল্ডটি নাল হয় তবে বাচ্চাদের তালিকার শেষে নিউচিল্ডটি .োকান। যদি নিউচিল্ড একটি ডকুমেন্টফ্রেগমেন্ট অবজেক্ট হয় তবে তার সমস্ত শিশুকে একই ক্রমে, রেফচিল্ডের আগে inোকানো হবে। নতুনচিল্ড যদি ইতিমধ্যে গাছটিতে থাকে তবে এটি প্রথমে সরানো হবে।

Answer 6

উপরে উল্লিখিত জকোরি পদ্ধতির কাজ করবে। আপনি জিকিউরি এবং সিএসএসও ব্যবহার করতে পারেন। উদাহরণস্বরূপ যেমন ডিভের উপর আপনি ক্লাস 1 এবং ডিভ 2 ব্যবহার করেছেন ক্লাস 2 প্রয়োগ করেছেন (উদাহরণস্বরূপ বলা যাক CSS এর প্রতিটি ক্লাস ব্রাউজারে নির্দিষ্ট অবস্থান সরবরাহ করে), এখন আপনি ক্লাসগুলি ইন্টারফেস করতে পারবেন jquery ব্যবহার করুন বা জাভাস্ক্রিপ্ট (যে অবস্থান পরিবর্তন করবে)

Answer 7

এই থ্রেডটি ফাটিয়ে দেওয়ার জন্য দুঃখিত আমি "অদলবদল ডোম-উপাদানগুলি" সমস্যার জন্য হোঁচট খেয়েছি এবং কিছুটা প্রায় খেললাম

ফলাফলটি একটি jQuery- স্থানীয় "সমাধান" যা সত্যই সুন্দর বলে মনে হচ্ছে (দুর্ভাগ্যক্রমে আমি জানি না যে jQuery ইন্টার্নালগুলিতে এটি করার সময় কী ঘটছে)

কোড:

$('#element1').insertAfter($('#element2'));

JQuery ডকুমেন্টেশন বলে যে উপাদানটি insertAfter() সরায় এবং এটি ক্লোন করে না