JQuery中两个ul标签的li互相移动

实例

<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>两个ul标签中的li互相移动</title>
    <style type="text/css">
        ul {
            list-style-type: none;
            float: left;
            margin-right: 30px;
            background-color: #f59b2b;
            width: 40%;
            height: 50%;
            padding: 0px;
        }

        li {
            margin-bottom: 5px;
            background-color: #15c37d;
        ;
        }
    </style>
    <script src="../js/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var myJson = [
            {"id": "1", "Name": "编号", "level": "1"},
            {"id": "2", "Name": "名称", "level": "1"},
            {"id": "3", "Name": "类型", "level": "1"},
            {"id": "4", "Name": "使用人","level": "1"},
            {"id": "5", "Name": "电子标签","level": "1"},
            {"id": "6", "Name": "登记位置","level": "1"},
            {"id": "7", "Name": "当前位置","level": "1"},
            {"id": "8", "Name": "分离检测","level": "1"},
            {"id": "9", "Name": "分离检测","level": "1"},
            {"id": "10", "Name": "电量","level": "1"}];
        $(function () {
            //动态添加Json数据到leftUL中
            var $leftUL = $("#leftUL");
            var $rightUL = $("#rightUL");
            for (var i = 0; i < myJson.length; i++) {
                $myLi = $("<li id='" + myJson[i].id + "'>" + myJson[i].Name +"</li>");
                // $myLi = $("<li id='" + myJson[i].id + "'>" + myJson[i].Name + "," + myJson[i].Age + "岁</li>");

                $myLi.click(function () {
                    if ($(this).parent().attr("id") == "leftUL") {
                        //通过判断父元素的ID来控制往哪个UL添加
                        //$rightUL.append($(this)); //第一种方法
                        $(this).appendTo($rightUL); //第二种方法
                    }
                    else {
                        $(this).appendTo($leftUL); //第二种方法
                    }
                });
                $leftUL.append($myLi);
            }
        });
    </script>
</head>
<body>
<ul id="leftUL">所有列</ul>
<ul id="rightUL" style="clear: right">想要的列</ul>

        <label style="width: 30%;float: left;">1</label>
        <label style="width: 30%;float: left;">2</label>
        <label style="width: 30%;float: left;"><input type="submit" name="Submit" value="提交" id="boxvalue"></label>

</html>

 

posted @ 2019-10-12 11:27  老虎死了还有狼  阅读(409)  评论(0)  编辑  收藏  举报