标签：
最近要做一个上移功能和下移功能，按照思路写完后发现不能多次操作问题
查过度娘后原来是涉及到元素多次绑定与解绑问题，对某行DOM元素进行操作后其父子、同辈层级关系已经改变，导致不能多次操作
解决办法为遍历所有元素，每次元素操作完重新绑定事件，就可以多次操作了
先上有问题的代码，警示自己
$(".main ul li .page .prev").click(function(){
var num = $(this).parents(".page").prev(".num").text();
var prevNum = parseInt($(this).parents("li").prev("li").find(".num").text());
$(this).parents("li").prev("li").find(".num").text(prevNum+1);
$(this).parents(".page").prev(".num").text(num-1);
$(this).parents("li").prev("li").before($(this).parents("li").clone());
$(this).parents("li").remove();
});
$(".main ul li .page .next").click(function(){
var prevNum = parseInt($(this).parents("li").next("li").find(".num").text());
prevNum = prevNum - 1;
$(this).parents("li").next("li").find(".num").text(prevNum);
var num = parseInt($(this).parents(".page").prev(".num").text());
num = num + 1;
$(this).parents(".page").prev(".num").text(num);
$(this).parents("li").next("li").after($(this).parents("li").clone());
$(this).parents("li").remove();
});
然后上正确的代码
$(document).ready(function () { //上移 $(".main ul li .page .prev").each(function () { $(this).click(function () { var num = parseInt($(this).parents(".page").prev(".num").text()); var prevNum = parseInt($(this).parents("li").prev("li").find(".num").text()); $(this).parents("li").prev("li").find(".num").text(prevNum+1); $(this).parents(".page").prev(".num").text(num-1); var $li = $(this).parents("li"); if ($li.index() != 0) { $li.prev("li").before($li); } }); }); //下移 var trLength = $(".main ul li .page .next").length; $(".main ul li .page .next").each(function () { $(this).click(function () { var prevNum = parseInt($(this).parents("li").next("li").find(".num").text()); prevNum = prevNum - 1; $(this).parents("li").next("li").find(".num").text(prevNum); var num = parseInt($(this).parents(".page").prev(".num").text()); num = num + 1; $(this).parents(".page").prev(".num").text(num); var $li = $(this).parents("li"); if ($li.index() != trLength - 1) { $li.next().after($li); } }); }); }); });
精确定位到某行的代码
$(".title").click(function(){
$(this).css({backgroundColor:"red"});
var liH = $(".main ul li").height();
var liTop = liH*11+liH;
$(".main ul").animate({
top:-liTop
},300).css({width:"600"});
$(".main ul li").eq(11).css({backgroundColor:"red"});
});
$(".footer").click(function(){
$(".main ul").animate({
top:0
},300).css({width:"582"});
});
然后是样式代码
body{background-color:#e0e0e0;} .main{width:600px; height:300px; border: 10px solid #666; margin:0 auto; background-color:#FFF; border-radius:3px; overflow-y:auto; padding:0; position:relative;margin-bottom:20px;} .main ul{padding:0; position:absolute;top:0; left:0;width:582px; min-height:300px;} .main li{ line-height:30px; border-top:1px solid #666;list-style-type:none; text-align:center;} .main li span.page{ float:right; display:block;} .main li span.page a{margin:0 10px; font-size:12px;} .title,.footer{width:600px; height:30px; line-height:30px; text-align:center; border: 10px solid #666; margin:0 auto; background-color:#FFF;border-radius:3px; margin-bottom:20px; cursor:pointer;} .title:hover,.footer:hover{background-color:#6F9;} .clear{clear:both} .clearfix:after{content: "."; display: block; height: 0; clear: both; visibility: hidden} .clearfix{zoom:1}
页面代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>overflow-y定位子元素</title> <script src="jquery-1.8.0.min.js"></script> </head> <body> <div class="title">上</div> <div class="main"> <ul> <li class="clearfix"> <span class="num">1</span>*****1111111111 <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">2</span>//////222222222222 <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">3</span>\\\\\33333333333 <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">4</span>----44444444444 <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">5</span>+++++55555555 <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">6</span>|||||66666666 <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">7</span>.....77777777 <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">8</span>~~~~~88888888 <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">9</span>!!!!99999999 <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">10</span>@@@@10 <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">11</span>####11 <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">12</span> <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">13</span> <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">14</span> <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">15</span> <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> <li class="clearfix"> <span class="num">16</span> <span class="page"> <a href="javascript:void(0)" class="prev">上移</a> <a href="javascript:void(0)" class="next">下移</a> </span> </li> </ul> </div> <div class="footer">下</div> </body> </html>
上移功能和下移功能【同时改变行序号和可多次操作，附点击定位到某行位置功能】
标签：
原文地址：http://www.cnblogs.com/zhixi/p/5456080.html
