jquery页面元素下上移动示例-JavaSript-爱易网页

jquery页面元素下上移动示例

日期：2014-05-16　浏览次数：20411 次

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

HTML code

<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代码的吗

------解决方案--------------------

JScript code


$("#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));
    }
});

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

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

------解决方案--------------------
on  修改为  bind  就可以了

------解决方案--------------------
这是全部代码  测试没有问题
HTML code
<!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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

jquery页面元素下上移动示例

相关资料更多>

推荐阅读更多>