jquery如何调整索引位置

<div class="area">
        <div class="onediv">1<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>
        <div class="onediv">2<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>
        <div class="onediv">3<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>
        <div class="onediv">4<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>
        <div class="onediv">5<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>
</div>比如：点击“移到首位”，就把它移到首位去。

解决方案 »

  1.   

    <!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>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(function () {
    $('.move').click(function(){
    var $papa=$(this).parent()
    $papa.clone(true).prependTo('.area')
    $papa.remove()
    })

            });
    </script>
    </head>
    <body>
    <div class="area">
            <div class="onediv">1<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>
            <div class="onediv">2<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>
            <div class="onediv">3<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>
            <div class="onediv">4<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>
            <div class="onediv">5<input type="button" class="show" value="显示当前index" /><input type="button" class="move" value="移到首位" /></div>
    </div>
    </body>
    </html>
      

  2.   


    <div class="area">
            <div class="onediv">1<input type="button" class="show" value="0" /><input type="button" class="move" value="移到首位1" /></div>
            <div class="onediv">2<input type="button" class="show" value="1" /><input type="button" class="move" value="移到首位2" /></div>
            <div class="onediv">3<input type="button" class="show" value="2" /><input type="button" class="move" value="移到首位3" /></div>
            <div class="onediv">4<input type="button" class="show" value="3" /><input type="button" class="move" value="移到首位4" /></div>
            <div class="onediv">5<input type="button" class="show" value="4" /><input type="button" class="move" value="移到首位5" /></div>
    </div>
    一般比较规则的排版，我都会将点击事件绑定在父节点中，减少事件的绑定
    $(".area").click(function(e){
    var target = $(e.target),
    $this = $(this);
    if (target.attr("class") === 'move'){
    $this.prepend(target.parent());
    $this.find(".show").val(function(i,v){
    return i;
    })
    }

    })