Sắp xếp phần tử HTML với jquery sort

27/09/2019

Đôi lúc khi đổ dữ liệu ra ngoài website một cách vô tình hay cố ý thì các phần tử HTML nằm lộn xộn với nhau không theo thứ tự. Và ta cần phải sắp xếp chúng lại theo thứ tự tăng dần hoặc giảm dần theo bảng chữ cái A..Z

Vì vậy, Master Frontend chia sẻ với các bạn thủ thuật nhỏ cho việc sắp xếp phần tử HTML với jquery

Ví dụ ta có cấu trúc HTML với các phần tử như sau:

<ul class="sortby"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> <li>JQuery</li> <li>AngularJS</li> <li>ReactJS</li> </ul>

Ta cần sắp xếp chúng lại theo thứ tự từ A-Z cho dễ nhìn, dễ tra cứu chẳng hạn.

Ta sẽ sử dụng phương thức sort() trong jQuery như sau:

$(".sortby li").sort(asc_sort).appendTo('.sortby'); // Sắp xếp theo thứ tự tăng dần function asc_sort(a, b){ return ($(a).text()) > ($(b).text()) ? 1 : -1; }

Chú ý: Ở đoạn code trên trong phương thức sort() ta có truyền vào 1 function để xử lý việc sắp xếp. Function này nhận vào 2 phần tử (ở đây là 2 thẻ <li> ), sau đó lấy giá trị text trong 2 phần tử này so sánh với nhau. Nếu phần tử trước lớn hơn phần tử sau thì trả về 1 (true) và change vị trí của chúng.

Tương tự ta có thể sửa đoạn code trong function so sánh để sắp xếp theo thứ tự giảm dần :

$(".sortby li").sort(desc_sort).appendTo('.sortby'); // Sắp xếp theo thứ tự tăng dần function desc_sort(a, b){ return ($(a).text()) < ($(b).text()) ? 1 : -1; }

Dưới đây là demo :

  • HTML
  • CSS
  • Javascript
  • JQuery
  • AngularJS
  • ReactJS

   

Back to top