Các yếu tố sắp xếp jQuery sử dụng id dữ liệu

Question

(xin lỗi nếu câu hỏi đã tồn tại)

Tôi rất mới phát triển jQuery.

Tôi có cấu trúc HTML như sau:

<div class="clist"> 
    <div data-sid=1></div> 
    <div data-sid=2></div> 
    <div data-sid=2></div> 
    <div data-sid=1></div> 
    <div data-sid=2></div> 
    <div data-sid=2></div> 
    <div data-sid=1></div> 
</div> 

Tôi muốn sắp xếp chúng như:

<div class="clist"> 
    <div data-sid=1></div> 
    <div data-sid=1></div> 
    <div data-sid=1></div> 
    <div data-sid=2></div> 
    <div data-sid=2></div> 
    <div data-sid=2></div> 
    <div data-sid=2></div> 
</div> 

Tôi đang sử dụng các chức năng

function sortContacts() { 
var contacts = $('div.clist'), cont = contacts.children('div'); 

cont.detach().sort(function(a, b) { 
      var astts = $(a).data('sid'); 
      var bstts = $(b).data('sid') 
      //return astts - bstts; 
      return (astts > bstts) ? (astts > bstts) ? 1 : 0 : -1; 
     }); 

contacts.append(cont); 
} 

Nhưng nó không phải đang làm việc như mong đợi ..

Nó hoạt động tốt cho lần đầu tiên nhưng khi thêm phần tử mới hoặc thay đổi dữ liệu-sid nó không hoạt động.

EDIT:

Demo

http://jsfiddle.net/f5mC9/1/

không làm việc?

Answer 1

Bạn có thể sử dụng dataset tài sản mà các cửa hàng tất cả các tùy chỉnh data-* thuộc tính của một phần tử, nó sẽ trả về một chuỗi, trong trường hợp mà bạn muốn chuyển đổi chuỗi thành một số bạn có thể sử dụng parseInt hoặc + điều hành.

$('.clist div').sort(function(a,b) { 
    return a.dataset.sid > b.dataset.sid; 
}).appendTo('.clist'); 

http://jsfiddle.net/CFYnE/

Và vâng, mã của bạn làm việc ở đây, http://jsfiddle.net/f5mC9/

Edit: Xin lưu ý rằng IE10! và dưới đây không hỗ trợ .dataset tài sản, nếu bạn muốn hỗ trợ tất cả các trình duyệt, bạn có thể sử dụng .data() phương pháp jQuery thay vì:

$('.clist div').sort(function(a,b) { 
    return $(a).data('sid') > $(b).data('sid'); 
}).appendTo('.clist'); 

Answer 2

$('.clist div').sort(function(a,b) { 
    return a.dataset.sid > b.dataset.sid ? 1 : -1; //be carefull, string comparaison 
}).appendTo('.clist'); 

hoặc có thể

$('.clist div').sort(function(a,b) { 
    return parseInt(a.dataset.sid) - parseInt(b.dataset.sid); 
}).appendTo('.clist'); 

sort() xử lý tiêu cực/tích cực trả về;

Answer 3

Một hàm tổng quát hơn để sắp xếp các yếu tố sử dụng jQuery:

$.fn.sortChildren = function (sortingFunction: any) { 

    return this.each(function() { 
     const children = $(this).children().get(); 
     children.sort(sortingFunction); 
     $(this).append(children); 
    }); 

}; 

Cách sử dụng:

$(".clist").sortChildren((a, b) => a.dataset.sid > b.dataset.sid ? 1 : -1);