jquery重新排序div

时间:2012-04-10 12:08:14

标签: jquery html

我有3个div想要在文件准备好的情况下颠倒顺序

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

如何在jquery中执行此操作?

4 个答案:

答案 0 :(得分:20)

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

在Jquery中尝试这个

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

您可以在jsfiddle http://jsfiddle.net/N7PGW/

中看到示例

答案 1 :(得分:12)

只需使用

$('#block-2').insertBefore('#block-1');
$('#block-3').insertBefore('#block-2');

示例小提琴:http://jsfiddle.net/2DUXF/

答案 2 :(得分:3)

这将反转id为“div1”的div内的所有div

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

这是jsFiddle http://jsfiddle.net/bCAVz/8/

答案 3 :(得分:0)

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

http://jsfiddle.net/8adwS/

另请注意,您可以将数组反向语法添加到jQuery函数语法中,这样可以节省选择器。