Thay đổi thứ tự của các phần tử

Question

Tôi đang tạo một trang web có chiều rộng nổi. Người dùng sử dụng màn hình từ độ phân giải HD đầy đủ đến 600px trên điện thoại thông minh có vẻ như một ý tưởng khá hay. Điều này mang đến một vấn đề rất thú vị.

Khi người dùng sử dụng độ phân giải nhỏ hơn mức tối ưu, trang sẽ nhận được nhiều chiều cao hơn. Điều này có nghĩa là có thể hữu ích khi thay đổi thứ tự của một số phần tử (ví dụ: một số hình ảnh, hộp tìm kiếm hoặc điều hướng) để làm cho trang dễ đọc hơn mà không cần nhiều scrooling.

Vì vậy, tôi cần có khả năng truy cập DOM và thay đổi thứ tự của một số phần tử trang (hoán đổi chúng).

phép nói rằng tôi có một danh sách và cần phải trao đổi mục 1 và 2.

<ul> 
    <li>1</li> 
    <li>2</li> 
</ul> 

Tôi tìm thấy một giải pháp dựa trên phụ đã ghi các yếu tố để <ul> bằng cách sử dụng chức năng appendChild. Tuy nhiên có một vấn đề với các nút văn bản và nó được thực sự phức tạp để làm điều đó cho cấu trúc phần tử khó khăn hơn, kể từ khi cần tái tạo lại toàn bộ.

Bạn có đề xuất nào để cải thiện nó không?

Answer 1

Đối với trường hợp này đơn giản (trao đổi chỉ có hai yếu tố), bạn chỉ có thể sử dụng appendChild() (fiddle)

var list = document.querySelector("ul"); 
list.appendChild(list.firstElementChild); 

Nút cùng không thể tồn tại ở nhiều vị trí; do đó, nó bị xóa khỏi vị trí hiện tại của nó và được đặt ở cuối bộ sưu tập.

Nếu bạn muốn làm phân loại phức tạp hơn, có lẽ bạn nên tạo một mảng từ childNodes (yaf) và nhận được tất cả điên:

var list = document.querySelector("ul"); 
var items = list.querySelectorAll("li"); 
var sortedList = Array.from(items).sort(function(a, b) { 
    var c = a.firstElementChild.textContent, 
    d = b.firstElementChild.textContent; 
    return c < d ? -1 : c > d ? 1 : 0; 
}); 
for (let item of sortedList) { 
    list.appendChild(item); 
} 

Answer 2

sẽ không trao đổi innerHTML cũng làm việc?

var myList = document.getElementsByTagName("ul")[0]; 
temp = myList.getElementsByTagName("li")[0].innerHTML; 
myList.getElementsByTagName("li")[0].innerHTML = myList.getElementsByTagName("li")[1].innerHTML; 
myList.getElementsByTagName("li")[1].innerHTML = temp;