Giả sử tôi có ba <div>phần tử trên một trang. Làm cách nào để hoán đổi vị trí của thứ nhất và thứ ba <div>? jQuery là tốt.

Tầm thường với jQuery

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

Nếu bạn muốn làm điều đó nhiều lần, bạn sẽ cần sử dụng các bộ chọn khác nhau vì các div sẽ giữ lại id của chúng khi chúng được di chuyển xung quanh.

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

Không cần thiết phải sử dụng thư viện cho một nhiệm vụ tầm thường như vậy:

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

Điều này tính đến thực tế là getElementsByTagNametrả về một NodeList trực tiếp được cập nhật tự động để phản ánh thứ tự của các phần tử trong DOM khi chúng được thao tác.

Bạn cũng có thể sử dụng:

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

và có nhiều phép hoán vị có thể có khác, nếu bạn muốn thử nghiệm:

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

ví dụ :-)

.trước và sau

Sử dụng vani JS hiện đại! Cách tốt hơn / sạch hơn trước đây. Không cần phải tham chiếu đến cha mẹ.

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

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

Hỗ trợ trình duyệt - 94,23% toàn cầu tính đến tháng 7 năm 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; 
};

và sử dụng nó như thế này:

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

nếu bạn không muốn sử dụng jQuery, bạn có thể dễ dàng điều chỉnh hàm.

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);
};

Chức năng này có vẻ lạ, nhưng nó phụ thuộc rất nhiều vào các tiêu chuẩn để hoạt động đúng. Trên thực tế, nó có vẻ hoạt động tốt hơn phiên bản jQuery mà tvanfosson đã đăng có vẻ như chỉ hoán đổi hai lần.

Nó dựa vào những tiêu chuẩn đặc biệt nào?

insertBefore Chèn nút newChild trước refChild nút con hiện có. Nếu refChild là null, hãy chèn newChild vào cuối danh sách con. Nếu newChild là một đối tượng DocumentFragment, tất cả các đối tượng con của nó sẽ được chèn, theo cùng một thứ tự, trước refChild. Nếu newChild đã có trong cây, nó sẽ bị loại bỏ trước tiên.

Cách tiếp cận jquery được đề cập ở trên sẽ hoạt động. Bạn cũng có thể sử dụng JQuery và CSS .Say, ví dụ: trên Div, bạn đã áp dụng class1 và div2, bạn đã áp dụng class class2 (ví dụ: mỗi lớp css cung cấp vị trí cụ thể trên trình duyệt), bây giờ bạn có thể hoán đổi các lớp bằng cách sử dụng jquery hoặc javascript (điều đó sẽ thay đổi vị trí)

Xin lỗi vì đã đụng chuỗi này, tôi đã vấp phải sự cố "hoán đổi các phần tử DOM" và đã giải quyết một chút

Kết quả là một "giải pháp" jQuery-native có vẻ rất đẹp (tiếc là tôi không biết điều gì đang xảy ra ở nội bộ jQuery khi thực hiện điều này)

Mật mã:

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

Tài liệu jQuery nói rằng điều đó insertAfter() sẽ di chuyển phần tử và không sao chép nó