2012-04-10 44 views
8

Tôi có 3 divs muốn đảo ngược thứ tự trên doucment sẵn sàngjquery sắp xếp lại các div

<div id="block-1">First</div> 
<div id="block-2">Second</div> 
<div id="block-3">Third</div> 

Làm thế nào tôi có thể làm điều này trong jquery?

+3

Tại sao bạn muốn đảo ngược chúng trên tài liệu sẵn sàng? Tại sao không chỉ tải chúng đảo ngược ban đầu? –

Trả lời

3

này sẽ đảo ngược tất cả các div bên trong một div với id "div1"

$(function(){ 
    var items=$("#div1 div").toArray(); 
     items.reverse(); 
     $.each(items,function(){ 
      $("#div1").append(this); 
     });  
    });​ 

Đây là jsFiddle http://jsfiddle.net/bCAVz/8/

+0

Tôi thích việc sử dụng toArray() - ngoài việc đảo ngược chung() đã được yêu cầu tôi cũng có thể sử dụng nó để ngẫu nhiên, vv –

19
<div id="parent"> 
<div id="block-1">First</div> 
<div id="block-2">Second</div> 
<div id="block-3">Third</div> 
</div> 

Và thử điều này trong Jquery

$('#parent > div').each(function() { 
    $(this).prependTo(this.parentNode); 
});​ 

Bạn có thể xem ví dụ trong jsfiddle http://jsfiddle.net/N7PGW/

+2

+1 vì không phụ thuộc vào việc biết số id hoặc số lượng div trong cha mẹ . –

0
$(
    $("div[id|=block]") 
     .slice(1) 
     .get() 
     .reverse() 
) 
    .insertBefore("div[id|=block]:first"); 

http://jsfiddle.net/8adwS/

Cũng lưu ý rằng bạn có thể thêm mảng ngược cú pháp với chức năng cú pháp jQuery, mà sẽ giúp bạn tiết kiệm một bộ chọn.

Các vấn đề liên quan