जावास्क्रिप्ट में HTML तत्वों को स्वैप कैसे करें?

Question

मैं डोम स्क्रिप्टिंग के लिए क्लासिक जावास्क्रिप्ट का उपयोग कर रहा हूं, मेरे पास एक कंटेनर डीआईवी में डीआईवी का एक सेट है। बच्चे DIV के क्लिक करें घटना पर, मैं चाहता हूँ कि बच्चे DIV जो घटना का कारण बना है यह ऊपर DIV साथ swaped जा करने के लिए .. मेरी कोड यहाँ जाता है ..

<div id="container"> 
     <div onclick="swapDiv(event);">1</div> 
     <div onclick="swapDiv(event);">2</div> 
     <div onclick="swapDiv(event);">3</div> 
</div> 

अगर DIV 2 क्लिक किया गया है यह होना चाहिए DIV 1

Answer 1

यह कोड वह करेगा जो आप चाहते हैं (यदि आप पहले बच्चे तत्व के साथ चयनित स्वैप करना चाहते हैं) के साथ स्वैप करें। यदि आप कुछ और चाहते हैं तो आपको अधिक सटीक होने की आवश्यकता है।

<script type="text/javascript"> 

function swapDiv(event,elem){ 
    elem.parentNode.insertBefore(elem,elem.parentNode.firstChild); 
} 

</script> 


<div id="container"> 
     <div onclick="swapDiv(event,this);">1</div> 
     <div onclick="swapDiv(event,this);">2</div> 
     <div onclick="swapDiv(event,this);">3</div> 
</div> 

Answer 2

यह की आवाज़ से आप मूल रूप से बस से पहले div, previousSibling साथ Ergo साथ div स्वैप करने के लिए चाहते हैं। आप शायद insertBefore कर सकते हैं लेकिन एक नया तत्व बनाने के बजाय मौजूदा का उपयोग करें। मुझे यकीन नहीं है कि संलग्न घटनाओं के साथ क्या होता है, अगर उन्हें सही तरीके से कॉपी किया जाएगा।

Answer 3

एक तत्व की parentNode संपत्ति आपको इसके मूल नोड देता है। तत्वों में insertBefore फ़ंक्शन है जो किसी अन्य संदर्भ तत्व से पहले तत्व को सम्मिलित करता है (यदि यह पहले से ही पेड़ में कहीं और है) इसे ले जा रहा है। और नोड्स में previousSibling है जो आपको पिछले भाई नोड (जो तत्व हो सकता है या नहीं भी) देता है। तो:

function swapDiv(elm) { 
    var previous = findPrevious(elm); 
    if (previous) { 
     elm.parentNode.insertBefore(elm, previous); 
    } 
} 

... जहां findPrevious इस तरह दिखता है:

function findPrevious(elm) { 
    do { 
     elm = elm.previousSibling; 
    } while (elm && elm.nodeType != 1); 
    return elm; 
} 

... जहाँ आपके onclick गुण होना चाहिए:

onclick="swapDiv(this);" 

... यद्यपि आप कर सकते हैं इसके बजाय डीओएम 2 इवेंट हुकिंग में देखें (addEventListener, या attachEvent आईई पर)।

थोड़ा OT, लेकिन मुझे लगता है कि अपने जीवन को आसान बनाने उपलब्ध कई पुस्तकालयों में से किसी का उपयोग करना चाहिये कर सकते हैं, इस तरह के Prototype, jQuery, Closure, या any of several others के रूप में। वास्तव में, इसके पहले के संस्करण में एक त्रुटि हुई क्योंकि यह लंबा था क्योंकि मैंने सीधे डीओएम के साथ निपटाया था। :-)

Answer 4

सिद्धांत रूप में आप अपने पिछले तत्व भाई से पहले केवल insertBefore पर क्लिक किया गया तत्व। हालांकि, व्हाइटस्पेस टेक्स्ट नोड्स की उपस्थिति पारंपरिक स्क्रिप्टिंग में होने वाली उससे अधिक परेशान होती है। Element Traversal API इस आसान हो जाएगा, लेकिन जब तक यह अधिक व्यापक रूप से ब्राउज़र में समर्थित है, सहायक काम करता है, जरूरी हैं जैसे .:

<div id="container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
</div> 

<script type="text/javascript"> 
    // Bind event to each line div 
    // 
    var div= firstElementChild(document.getElementById('container')); 
    while (div!==null) { 
     div.onclick= swapWithPreviousElement; 
     div= nextElementSibling(div); 
    } 

    // Move element before its previous element sibling 
    // 
    function swapWithPreviousElement() { 
     var previous= previousElementSibling(this); 
     if (previous!==null) 
      this.parentNode.insertBefore(this, previous); 
    } 


    // We've used some Element Traversal API methods but some 
    // browsers don't support them yet. Provide wrapper functions 
    // for compatibility. 
    // 
    function previousElementSibling(element) { 
     if ('previousElementSibling' in element) 
      return element.previousElementSibling; 
     do 
      element= element.previousSibling; 
     while (element!==null && element.nodeType!==1); 
     return element; 
    } 
    function nextElementSibling(element) { 
     if ('nextElementSibling' in element) 
      return element.nextElementSibling; 
     do 
      element= element.nextSibling; 
     while (element!==null && element.nodeType!==1); 
     return element; 
    } 
    function firstElementChild(element) { 
     if ('firstElementChild' in element) 
      return element.firstElementChild; 
     var child= element.firstChild; 
     while (child!==null && child.nodeType!==1) 
      child= child.nextSibling; 
     return child; 
    } 
</script> 

Answer 5

स्वैप किसी भी नोड्स, भाई बहन नहीं, adjecent नहीं भाई बहन, कोई अस्थायी नोड्स, कोई क्लोनिंग, कोई jquery ... IE9 +

function swapNodes(n1, n2) { 

    var p1 = n1.parentNode; 
    var p2 = n2.parentNode; 
    var i1, i2; 

    if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return; 

    for (var i = 0; i < p1.children.length; i++) { 
     if (p1.children[i].isEqualNode(n1)) { 
      i1 = i; 
     } 
    } 
    for (var i = 0; i < p2.children.length; i++) { 
     if (p2.children[i].isEqualNode(n2)) { 
      i2 = i; 
     } 
    } 

    if (p1.isEqualNode(p2) && i1 < i2) { 
     i2++; 
    } 
    p1.insertBefore(n2, p1.children[i1]); 
    p2.insertBefore(n1, p2.children[i2]); 
}