jQuery 实现 li 的上移下移

来源：互联网发布：结婚四件套价位知乎编辑：程序博客网时间：2024/04/27 22:31

jQuery 实现 li 的上移下移

<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script> </head> <body> <ul id="Thetag"> <li tag="1" > <div>1</div> </li> <li tag="2" > <div>2</div> </li> <li tag="3" > <div>3</div> </li> <li tag="4" > <div>4</div> </li> <li tag="5" > <div>5</div> </li> <li tag="6" > <div>6</div> </li> <li tag="7" > <div>7</div> </li> <li tag="8" > <div>8</div> </li> <li tag="9" > <div>9</div> </li> </ul> <script type="text/javascript"> function move(value){ var num=$('#txt').val(); var pNode,cNode,nNode,index=-1; $('#Thetag li').each(function (i){ if(this.tag!=num&&index==-1){ pNode=this; } else{ if(this.tag==num){ index=i; cNode=this; } else{ nNode=this; return false; } } }); if(value=='p'){ $(cNode).insertBefore($(pNode)); } else{ $(cNode).insertAfter($(nNode)); } } </script> 移动<input type='text' id='txt' /> <input type='button' id='btnP' onclick='move("p");' value='上移' /> <input type='button' id='btnN' onclick='move("n");' value='下移' /> </body> </html>