jquery页面元素下上移动示例

2012-08-28

jquery页面元素上下移动示例？HTML codedivaaaaaaaaaaadiv idup1上/divdiv iddown1下/div

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> 
 
[解决办法]
HTML code<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>

热点排行

Bad Request.

JavaScript

jquery页面元素下上移动示例