สมมติว่าฉันมี<div>องค์ประกอบสามอย่างในหนึ่งหน้า ฉันจะสลับตำแหน่งของครั้งแรกและครั้งที่สามได้อย่างไร<div>อย่างไร? jQuery ใช้ได้

เล็กน้อยกับjQuery

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

หากคุณต้องการทำซ้ำ ๆ คุณจะต้องใช้ตัวเลือกที่แตกต่างกันเนื่องจาก div จะยังคงรักษารหัสไว้เมื่อมีการเคลื่อนย้าย

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

ไม่จำเป็นต้องใช้ไลบรารีสำหรับงานที่ไม่สำคัญ:

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ส่งคืน NodeList ที่ใช้งานอยู่ซึ่งได้รับการอัปเดตโดยอัตโนมัติเพื่อแสดงลำดับขององค์ประกอบใน 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]));

ตัวอย่างเช่น :-)

.ก่อนและหลัง

ใช้วานิลลาสมัยใหม่ JS! ดีกว่า / สะอาดกว่าเดิม ไม่จำเป็นต้องอ้างอิงผู้ปกครอง

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

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

การรองรับเบราว์เซอร์ - 95% ทั่วโลก ณ ต.ค. 20

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 คุณสามารถปรับฟังก์ชั่นได้อย่างง่ายดาย

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 โพสต์ซึ่งดูเหมือนว่าจะทำการ swap เพียงสองครั้ง

มันขึ้นอยู่กับลักษณะเฉพาะมาตรฐานอะไรบ้าง?

insertBefore แทรกโหนด newChild ก่อนโหนดลูกที่มีอยู่ refChild ถ้า refChild เป็นโมฆะให้ใส่ newChild ที่ท้ายรายชื่อเด็ก ถ้า newChild เป็นอ็อบเจ็กต์ DocumentFragment ลูกของมันทั้งหมดจะถูกแทรกในลำดับเดียวกันก่อนที่จะ refChild ถ้า newChild อยู่ในแผนภูมิแล้วระบบจะลบออกก่อน

วิธี Jquery ที่กล่าวถึงด้านบนจะใช้งานได้ คุณยังสามารถใช้ JQuery และ CSS ได้อีกด้วยพูดเช่นใน Div หนึ่งที่คุณได้ใช้ class1 และ div2 คุณได้ใช้คลาส class2 (เช่นแต่ละคลาสของ css ให้ตำแหน่งเฉพาะบนเบราว์เซอร์) ตอนนี้คุณสามารถแลกเปลี่ยนคลาสโดยใช้ jquery หรือ javascript (ที่จะเปลี่ยนตำแหน่ง)

ขออภัยที่ทำให้เธรดนี้สะดุดฉันสะดุดกับปัญหา "สลับองค์ประกอบ DOM" และเล่นไปสักหน่อย

ผลลัพธ์ที่ได้คือ "โซลูชัน" แบบ jQuery-native ซึ่งดูเหมือนจะสวยจริงๆ (น่าเสียดายที่ฉันไม่รู้ว่าเกิดอะไรขึ้นที่ jQuery ภายในเมื่อทำสิ่งนี้)

รหัส:

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

เอกสาร jQuery ระบุว่าinsertAfter() ย้ายองค์ประกอบและไม่โคลน