Làm thế nào để sắp xếp div theo id của họ bằng cách sử dụng jQuery?

Question

tôi có một tập hợp các div với id ngẫu nhiên:

<div id="container"> 
    <div id="2"></div> 
    <div id="9"></div> 
    <div id="7"></div> 
    <div id="1"></div> 
    <div id="4"></div> 
</div> 

Có một cách nhanh chóng để sắp xếp chúng theo giá trị id của họ sử dụng jQuery? Cảm ơn bạn.

Answer 1

Tôi muốn sử dụng plugin tinysort:

http://tinysort.sjeiti.com/

Trong trường hợp của bạn nó sẽ là một cái gì đó như:

$("#container > div").tsort("",{attr:"id"});

Answer 2

Có plugin và những thứ tương tự để làm sắp xếp của các nguyên tố . Nếu bạn có kế hoạch thực sự sắp xếp lại các phần tử DOM, có lẽ bạn nên sử dụng một trong số chúng.

Nếu bạn chỉ muốn danh sách được sắp xếp của các div, bạn có thể sử dụng Javascript - vì mảng có thể được sắp xếp bằng cách sử dụng hàm so sánh tùy chỉnh. Bạn có thể chuyển đổi tập hợp được chọn là <div> s thành một mảng bằng cách sử dụng toArray() và sau đó sắp xếp chúng bằng cách sử dụng cơ chế này.

$('#container > div').toArray().sort(function(a,b) { a.id - b.id }); 

Bạn cũng có thể sử dụng detach() và appendTo() phương pháp để loại bỏ và tái chèn các yếu tố theo thứ tự sắp xếp. Tuy nhiên, đây có thể không phải là cách hiệu quả nhất để sắp xếp lại các phần tử DOM.

Answer 3

Hãy thử plugin jquery của tôi $.toArrayouter, sử dụng thư viện Underscore.

$('#container').html(_.sortBy($('#container>div').toArrayouter(),function (name) {return name}).join('')) 

Demo: http://jsfiddle.net/abdennour/fDZjR/1/