请教JQuery实现元素互换方法？

有容器A和容器B，点击A容器的内容，能跳到容器B里，反之点击容器B的元素，也能跳到容器A里。想了一晚上，只写出从A跳到B，而从B跳回A，就想不通了！请高手指教！谢谢！<script type="text/javascript">
        var dataArr = [{ Id: "0", name: "刘备" }, { Id: "1", name: "曹操" }, { Id: "2", name: "孙权"}];
        function loadData() {
            for (var i = 0; i < dataArr.length; i++) {
                var items = dataArr[i];
                $("#UlLeft").append($("<li tag='" + items.id + "'>" + items.name + "</li>"));
                $("#UlLeft li").click(function() {
                    $(this).appendTo($("#UlRight"));
                })
                $("#UlRight").click(function() {
                    $(this).appendTo($("#UlLeft"));
                })         
              })
            }
        }
    </script>
<body onload="loadData()">
<ul id="UlLeft"></ul>
<ul id="UlRight"></ul>
</body>

解决方案 »

  1.   

    <script type="text/javascript">
            var dataArr = [{ Id: "0", name: "刘备" }, { Id: "1", name: "曹操" }, { Id: "2", name: "孙权"}];
            function loadData() {
                for (var i = 0; i < dataArr.length; i++) {
                    var items = dataArr[i];
                    $("#UlLeft").append($("<li tag='" + items.id + "'>" + items.name + "</li>"));
                    $("#UlLeft li,#UlRight li").live("click.left",function(e) {
                        $(this).appendTo($("#UlRight"));
                    }).live("click.right",function(e) {
                        $(this).appendTo($("#UlLeft"));
                    })
                    $("#UlLeft li").live("click",function(e){
                     $(this).trigger("click.left");
                    })
                    $("#UlRight li").live("click.left",function(e){
                     $(this).trigger("click.right");
                    })
                  }
                }
        </script>
    </head>    
    <body onload="loadData()">
    <ul style="border:1px solid red" id="UlLeft"></ul>
    <ul style="border:1px solid green" id="UlRight"></ul>
    </body>
    </html>
      

  2.   

    或者用下面一个：
    <script type="text/javascript">
            var dataArr = [{ Id: "0", name: "刘备" }, { Id: "1", name: "曹操" }, { Id: "2", name: "孙权"}];
            function loadData() {
                for (var i = 0; i < dataArr.length; i++) {
                    var items = dataArr[i];
                    $("#UlLeft").append($("<li tag='" + items.id + "'>" + items.name + "</li>"));
                 }
                 $("#UlLeft li").click(function(e) {
                    var $curUL=$(this).closest("ul");
                    var $appendUL=$("#"+($curUL[0].id=='UlLeft'?'UlRight':'UlLeft'));
                    $(this).appendTo($appendUL);
                 })
            }
        </script>
      

  3.   


    $("li").click(function() {
       if(this.parentNode.id=="UlLeft"){
              $(this).appendTo($("#UlRight"));}
       else{
              $(this).appendTo($("#UlLeft"));}       
                    }) 用这段代码试试！！！
    还有下次记得把不必要的东西放到循环外面！！