上移功能和下移功能【同时改变行序号和可多次操作，附点击定位到某行位置功能】
最近要做一个上移功能和下移功能，按照思路写完后发现不能多次操作问题
查过度娘后原来是涉及到元素多次绑定与解绑问题，对某行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>
附：对表格操作
$(document).ready(function () { //上移 $("a.menuPrev").each(function () { $(this).click(function () { var $tr = $(this).parents("tr"); if ($tr.index() != 0) { $tr.prev().before($tr); } }); }); //下移 var trLength = $("a.menuNext").length; $("a.menuNext").each(function () { $(this).click(function () { var $tr = $(this).parents("tr"); if ($tr.index() != trLength - 1) { $tr.next().after($tr); } }); }); });
<table class="table table-striped table-bordered table-hover text-center xj-table"> <thead> <tr> <th class="text-center">序号</th> <th class="text-center">菜单名称</th> <th class="text-center">操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>2</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>3</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>4</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>5</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>6</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>7</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>8</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> </tbody> </table>
根据上移下移关系来显示隐藏子内容，前后层级关系好绕 =-=
$(document).ready(function () { //上移 $(".xj-sort-table tbody tr:first td:last a.menuPrev").hide(); $(".xj-sort-table tbody tr:last td:last a.menuNext").hide(); $("a.menuPrev").each(function () { $(this).click(function () { var $tr = $(this).parents("tr"); $tr.parent().find("a").show(); if ($tr.index() != 0) { $tr.prev().before($tr); } $tr.parent().find(".menuPrev").first().hide(); $tr.parent().find(".menuNext").last().hide(); }); }); //下移 var trLength = $("a.menuNext").length; $("a.menuNext").each(function () { $(this).click(function () { var $tr = $(this).parents("tr"); $tr.parent().find("a").show(); if ($tr.index() != trLength - 1) { $tr.next().after($tr); } $tr.parent().find(".menuNext").last().hide(); $tr.parent().find(".menuNext").first().show(); $tr.parent().find(".menuPrev").first().hide(); }); }); });
<table class="table table-striped table-bordered table-hover text-center xj-table xj-sort-table"> <thead> <tr> <th class="text-center">序号</th> <th class="text-center">菜单名称</th> <th class="text-center">操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>2</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>3</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>4</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>5</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>6</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>7</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> <tr> <td>8</td> <td>销售管理</td> <td><a href="##" class="xj-prev-next menuPrev">↑上移</a><a href="##" class="xj-prev-next menuNext">下移↓</a></td> </tr> </tbody> </table>
