DOM में JavaScript मूविंग एलिमेंट

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

@ आयन - बिंदु यह है कि यह तत्वों की सापेक्ष स्थिति पर निर्भर करता है। एक बार जब आप ऑर्डर बदलते हैं तो आप पहले और तीसरे को उनकी आईडी से नहीं ढूंढ सकते हैं और दूसरे तरीके से काम करने की जरूरत है। मेरा उत्तर केवल अनुरोधित कार्य को पूरा करने के तरीकों की कार्यक्षमता को दर्शाने के लिए था, न कि एक निर्धारित संख्या में पहले और तीसरे विभाग की अदला-बदली के लिए एक व्यापक समाधान हो।

— तवानफोसन

हाय दोस्तों, एक त्वरित प्रश्न: क्या उपरोक्त jquery फ़ंक्शन पूरा होने के बाद मूल डोम राज्य में वापस रीसेट करने का एक आसान तरीका है?

— विकी

@Vikita - हाँ, मूल HTML को सहेजें और फिर इसे पुनर्स्थापित करें। यदि आपको सीधे किसी उच्च तत्व को सौंप दिया गया है तो आपको किसी भी हैंडलर को फिर से आवेदन करना होगा। उदाहरण के लिए,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देता है कि एक जीवित नोडलिस्ट को लौटाता है जो डोम में तत्वों के आदेश को प्रतिबिंबित करने के लिए स्वचालित रूप से अपडेट किया जाता है क्योंकि उन्हें हेरफेर किया गया है।

आप यह भी उपयोग कर सकते हैं:

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 की तरह कुछ प्रदान करता है - बॉक्स से बाहर बढ़ाया क्षमताओं का उल्लेख नहीं करना।

— क्रेजी जो मालॉय सेप

हाँ, लेकिन यह केवल एक ही कौन करता है?

— तवानफोसन

... या पेज पर केवल 3 डिवीजन हैं

— रियान फ्लोरेंस

@ हर कोई: मूल प्रश्न ने तीसरे और पहले डिव को एक पेज पर स्वैप करने का तरीका पूछा, जिसमें तीन तलाक थे। यही सवाल था जिसका मैंने जवाब दिया। यदि ओपी के पास एक अधिक जटिल प्रश्न था, तो उन्हें यह पूछना चाहिए था, और उन्हें अधिक जटिल उत्तर मिला होगा ;-)

— NickFitz

अगर कोई 2014 में इसे ढूंढ रहा है, तो कृपया इस उत्तर पर विचार करें। jQuery तब उपयोगी था, लेकिन अब यह इतना उपयोगी नहीं रह गया है, क्योंकि ब्राउज़र मानकीकृत हैं, इसलिए इस तरह के एक सरल कार्य को करने के लिए सिर्फ 80 kb लाइब्रेरी जोड़ने की आवश्यकता नहीं है। इसके अलावा, आपको यह जानने की ज़रूरत नहीं है कि DOM वास्तव में तब तक क्या है जब तक आप इसे jQuery के बिना

— आज़माएंगे

Answer 3

।पहले और बाद में

आधुनिक वेनिला JS का उपयोग करें! पहले की तुलना में बेहतर / स्वच्छ तरीका। माता-पिता को संदर्भित करने की आवश्यकता नहीं है।

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

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

ब्राउज़र समर्थन - जुलाई '20 तक 94.23% ग्लोबल

Comments

अभी तक कोई इंटरनेट एक्सप्लोरर समर्थन नहीं करता है।

— justnorris

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

— गिबोल्ट

अन्य विधियां केवल स्थिरता के संबंध में काम करती हैं, खासकर जब एक अच्छे स्वच्छ फ़ंक्शन में लपेटते हैं। मैं आधुनिक कोड लिखने के लिए हूं, लेकिन यह खून बह रहा है। यह जानना बहुत अच्छा है कि भविष्य क्या है, लेकिन जितना मैं IE से संबंधित कुछ भी नापसंद करता हूं - यह जानना महत्वपूर्ण है कि आपके निर्णयों का क्या प्रभाव है। इस मामले में - किसी भी IE ब्राउज़र में एक टूटी हुई वेब ऐप। अगर आपके साथ यह ठीक है - महान! मैंने इस टिप्पणी को किसी को भी सूचित करने के लिए जोड़ा है :)

— justnorris

तो 27% उपयोगकर्ता कुछ उपयोगकर्ता हैं ? हम लाखों बात कर रहे हैं!

— सैंडरॉक

एक वर्ष में, वह संख्या 10% के करीब होगी। यह ज्यादातर उद्यम, सरकार और पुराने मोबाइल उपकरणों में है। यह आमतौर पर गैर-व्यक्तिगत उपकरणों या कम तकनीकी रूप से इच्छुक उपयोगकर्ताओं का मतलब है। उत्तर आगे देखते हुए होना चाहिए ताकि हम 2009 में विकसित न हो सकें।

— गिबोल्ट

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 के संस्करण से बेहतर कार्य करने के लिए लग सकता है जो कि tvanfosson ने पोस्ट किया है जो केवल दो बार स्वैप करने के लिए लगता है।

यह किस मानकों पर निर्भर करता है?

InsertBefore मौजूदा बच्चे नोड refChild से पहले नोड newCild सम्मिलित करता है। यदि रिफिल्ड शून्य है, तो बच्चों की सूची के अंत में न्यूचिल्ड डालें। यदि newChild एक डॉक्यूमेंटफ्रेगमेंट ऑब्जेक्ट है, तो उसके सभी बच्चे, उसी क्रम में, RefChild से पहले डाले जाते हैं। यदि न्यूचाइल्ड पहले से ही पेड़ में है, तो इसे पहले हटा दिया जाता है।

Answer 6

शीर्ष पर उल्लिखित jquery दृष्टिकोण काम करेगा। आप JQuery और CSS का भी उपयोग कर सकते हैं। उदाहरण के लिए Div पर, आपने class1 और div2 को लागू किया है, आपने वर्ग class2 लागू किया है (उदाहरण के लिए, css का प्रत्येक वर्ग ब्राउज़र पर विशिष्ट स्थिति प्रदान करता है), अब आप कक्षाओं का उपयोग जेकरी या उपयोग करके इंटरचेंज कर सकते हैं जावास्क्रिप्ट (वह स्थिति बदल जाएगी)

Answer 7

इस धागे को उछालने के लिए क्षमा करें, मैं "स्वैप डोम-एलिमेंट्स" समस्या पर लड़खड़ाया और थोड़ा इधर-उधर खेला

परिणाम एक jQuery- देशी "समाधान" है जो वास्तव में बहुत अच्छा लगता है (दुर्भाग्य से मुझे नहीं पता कि ऐसा करते समय jQuery के इंटर्नल में क्या हो रहा है)

कोड:

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

JQuery प्रलेखन कहता है कि तत्व को insertAfter() स्थानांतरित करता है और इसे क्लोन नहीं करता है