जावास्क्रिप्ट में डोम बच्चे नोड्स को कैसे स्वैप करें?

Question

बाल नोड्स के क्रम को स्वैप करने का सबसे आसान तरीका क्या है?

उदाहरण के लिए मैं बाल नोड [3] बाल नोड [4] और इसके विपरीत होना चाहता हूं।

Answer 1

क्लोनिंग की कोई आवश्यकता नहीं है। तुम सिर्फ इस के साथ अन्य से पहले एक नोड स्थानांतरित कर सकते हैं:

childNode[4].parentNode.insertBefore(childNode[4], childNode[3]); 

आप नोड के माता-पिता से मिलता है। फिर आप माता-पिता पर सम्मिलित विधि से पहले कॉल करें और आप इसे बच्चे नोड [4] नोड पास करें और बताएं कि आप इसे बच्चे नोड [3] से पहले डालना चाहते हैं। इससे आपको उनके आदेश को स्वैप करने का नतीजा मिलेगा, इसलिए यह 4 होने से पहले 3 होगा।

संदर्भ documentation on insertBefore।

डीओएम में पहले से मौजूद डीओएम में डाला गया कोई भी नोड पहले स्वचालित रूप से हटा दिया जाता है और फिर वापस डाला जाता है इसलिए पहले इसे मैन्युअल रूप से हटाने की आवश्यकता नहीं होती है।

Answer 2

jfriend00 द्वारा उत्तर वास्तव में तत्वों को स्वैप नहीं करता है (यह केवल तत्वों को "स्वैप" करता है जो एक दूसरे के बगल में होते हैं और केवल उसी माता-पिता नोड के नीचे होते हैं)। यह ठीक है, क्योंकि यह सवाल था।

यह उदाहरण यह क्लोनिंग द्वारा तत्वों स्वैप लेकिन उनकी स्थिति और डोम स्तर की परवाह:

// Note: Cloned copy of element1 will be returned to get a new reference back 
function exchangeElements(element1, element2) 
{ 
    var clonedElement1 = element1.cloneNode(true); 
    var clonedElement2 = element2.cloneNode(true); 

    element2.parentNode.replaceChild(clonedElement1, element2); 
    element1.parentNode.replaceChild(clonedElement2, element1); 

    return clonedElement1; 
} 

संपादित करें: नया संदर्भ का जोड़ा लाभ (आप संदर्भ रखना चाहते हैं, उदाहरण के लिए विशेषता का उपयोग करने की "parentNode "(अन्यथा यह खो जाता है))। उदाहरण: ई 1 = एक्सचेंज एलिमेंट्स (ई 1, ई 2);

Answer 3

cloneNode के बिना किसी भी नोड्स के एक असली स्वैप के लिए:

<div id="d1">D1</div> 
    <div id="d2">D2</div> 
    <div id="d3">D3</div> 

SwapNode समारोह के साथ

(PrototypeJS उपयोग करते हुए):

function SwapNode(N1, N2) { 
N1 = $(N1); 
N2 = $(N2); 

if (N1 && N2) { 
    var P1 = N1.parentNode; 
    var T1 = document.createElement("span");  
    P1.insertBefore(T1, N1); 

    var P2 = N2.parentNode; 
    var T2 = document.createElement("span"); 
    P2.insertBefore(T2, N2); 

    P1.insertBefore(N2, T1); 
    P2.insertBefore(N1, T2); 

    P1.removeChild(T1); 
    P2.removeChild(T2); 
} 
} 
SwapNode('d1', 'd2'); 
SwapNode('d2', 'd3'); 

उत्पादन होगा:

<div id="d3">D3</div> 
<div id="d1">D1</div> 
<div id="d2">D2</div> 

Answer 4

इस विधि का प्रयास करें :

1. Get the parent element
2. स्टोर two elements you want to swap

3. स्टोर .nextSibling of the node that is last in order जैसे: [1,2,3,4] => हम स्वैप करने के लिए 3 & 2 फिर 3 की nextSibling की दुकान, चाहते हैं '4'।

4. .insertBefore (3,2);

5. .insertBefore (2, अगली सिब्लिंग);

Answer 5

मुझे डोम में एक ही स्थान पर स्वैप किए गए तत्वों को रखने के लिए दो मनमानी नोड्स को स्वैप करने के लिए एक फ़ंक्शन की आवश्यकता थी।उदाहरण के लिए, यदि एक अपनी मूल करने के लिए स्थिति 2 रिश्तेदार था और ख में स्थिति 0 अपनी मूल के सापेक्ष था, ख एक के पूर्व मूल की स्थिति 2 बदलना चाहिए और एक बच्चे को प्रतिस्थापित करना चाहिए बी के पूर्व माता-पिता के 0।

यह मेरा समाधान है जो स्वैप को डोम के पूरी तरह से अलग हिस्सों में रहने की अनुमति देता है। ध्यान दें कि स्वैप एक साधारण तीन चरण स्वैप नहीं हो सकता है। दो तत्वों में से प्रत्येक को पहले डोम से हटा दिया जाना चाहिए क्योंकि उनके पास भाई बहन हो सकते हैं जिन्हें अद्यतन करने की आवश्यकता होगी, आदि

समाधान: मैंने रिश्तेदार भाई आदेश रखने के लिए प्रत्येक नोड की जगह को पकड़ने के लिए दो धारक div में रखा है। मैं फिर दूसरे के प्लेसहोल्डर में प्रत्येक नोड्स को दोबारा जोड़ता हूं, जो स्वैप से पहले स्वैप किए गए नोड के सापेक्ष स्थिति को रखते थे। (मेरा समाधान बक के समान है)।

समारोह swapDom (ए, बी) {

var aParent = a.parentNode; 
var bParent = b.parentNode; 

var aHolder = document.createElement("div"); 
var bHolder = document.createElement("div"); 

aParent.replaceChild(aHolder,a); 
bParent.replaceChild(bHolder,b); 

aParent.replaceChild(b,aHolder); 
bParent.replaceChild(a,bHolder); 

}

Answer 6

उपयोग .before या .after!

यह वेनिला जेएस है!

childNode[3].before(childNode[4]); 

या

childNode[4].after(childNode[3]); 

अधिक स्थायित्व अदला-बदली के लिए, कोशिश:

function swap(node1, node2) { 
    const afterNode2 = node2.nextElementSibling; 
    const parent = node2.parentNode; 
    node1.replaceWith(node2); 
    parent.insertBefore(node1, afterNode2); 
} 

यह काम करना चाहिए, भले ही माता-पिता