jquery页面元素上下移动示例？

<div>aaaaaaaaaaa<div id="up1">上</div><div id="down1">下</div></div>
   <div>bbbbbbbbbbb<div id="up2">上</div><div id="down2">下</div></div>
   <div>cccccccccc<div id="up3">上</div><div id="down3">下</div></div>假设3个div，能上下移动每次移动一个位置，然后到了第一位或最后一位要判断是否到底或到顶然后提示一下？
有js代码的吗

解决方案 »

  1.   

    如果有3个div我点击其中一个div，如何获取当前点击div的索引呢
      

  2.   


    $("#div1 div[id^=up]").on("click",function(){
        var p = $(this).parent();
        var index = $("#div1 > div").index(p);
        if(index == 0){
            alert("已经在最上面");return;
        }
        else{
            $("#div1 > div").eq(index-1).before($("#div1 > div").eq(index));
        }
    });$("#div1 div[id^=down]").on("click",function(){
        var p = $(this).parent();
        var count = $("#div1 > div").length;
        var index = $("#div1 > div").index(p);
        if(index == (count-1)){
            alert("已经在最下面");return;
        }
        else{
            $("#div1 > div").eq(index+1).after($("#div1 > div").eq(index));
        }
    });<div id="div1">
      <div>aaaaaaaaaaa<div id="up1">上</div><div id="down1">下</div></div>
       <div>bbbbbbbbbbb<div id="up2">上</div><div id="down2">下</div></div>
       <div>cccccccccc<div id="up3">上</div><div id="down3">下</div></div>
    </div>
      

  3.   

    正好想问一下啊。js原生版本的获得。。如何获取当前点击div的索引呢
      

  4.   

    var arr = document.getElementById("div1").childNodes;//获取所有子元素
        for(var i=0; i<arr.length; i++){//循环子元素 
            if(当前元素对象==arr[i]){alert(i);}// 如果相同返回索引号
        }
      

  5.   

    我的是jquery1.4.2的没有on这个函数啊
      

  6.   

    on  修改为  bind  就可以了
      

  7.   

    完全没有效果，bind函数进不去啊
      

  8.   

    这是全部代码  测试没有问题<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>无标题页</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $("#div1 div[id^=up]").bind("click",function(){
        var p = $(this).parent();
        var index = $("#div1 > div").index(p);
        if(index == 0){
            alert("已经在最上面");return;
        }
        else{
            $("#div1 > div").eq(index-1).before($("#div1 > div").eq(index));
        }
    });$("#div1 div[id^=down]").bind("click",function(){
        var p = $(this).parent();
        var count = $("#div1 > div").length;
        var index = $("#div1 > div").index(p);
        if(index == (count-1)){
            alert("已经在最下面");return;
        }
        else{
            $("#div1 > div").eq(index+1).after($("#div1 > div").eq(index));
        }
    });
        
    }) ;
    </script>
    </head>
    <body>
    <div id="div1">
      <div>aaaaaaaaaaa<div id="up1" style="cursor:pointer;">上</div><div id="down1" style="cursor:pointer;">下</div></div>
       <div>bbbbbbbbbbb<div id="up2" style="cursor:pointer;">上</div><div id="down2" style="cursor:pointer;">下</div></div>
       <div>cccccccccc<div id="up3" style="cursor:pointer;">上</div><div id="down3" style="cursor:pointer;">下</div></div>
    </div>
    </body>
    </html>
      

  9.   

    <div id="Container">
    <div>aaaaaaaaaaa<div id="up1">上</div><div id="down1">下</div></div>
       <div>bbbbbbbbbbb<div id="up2">上</div><div id="down2">下</div></div>
       <div>cccccccccc<div id="up3">上</div><div id="down3">下</div></div></div>
    <script>
        $(function () {
            var up, idx, o;
            $('#Container div[id]').click(function () {
                o = $(this);
                up = o.attr('id').indexOf('up') != -1;
                idx = o.parent().index();
                if (up) {
                    if (idx == 0) alert('已经是第一个鸟~~');
                    else o.parent().prev().before(o.parent())
                }
                else {
                    if (idx == $('#Container>div').size() - 1) alert('已经是最后一个鸟~~');
                    else o.parent().next().after(o.parent())
                 }
            });
        });
    </script>