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
