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 @   老虎死了还有狼  阅读(413)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示