JQuery中两个ul标签的li互相移动实现方法


Posted in Javascript onMay 18, 2015

本文实例讲述了JQuery中两个ul标签的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=utf-8" />
<title>两个ul标签中的li互相移动</title>
<style type="text/css">
ul{
 list-style-type:none;
 float:left;
 margin-right:30px;
 background-color:Green;
 width:100px;
 height:100px;
 padding:0px;
}
li{
 margin-bottom:5px;
 background-color:Red;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var myJson = [{ "id": "1", "Name": "刘德华", "Age": "52" },
{ "id": "2", "Name": "文章", "Age": "26" },
{"id":"3","Name":"孙红雷","Age":"40"},
{ "id": "4", "Name": "葛优", "Age": "58"}];
$(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 + "," + 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">
  </ul>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js实现广告漂浮效果的小例子
Jul 02 Javascript
js数组依据下标删除元素
Apr 14 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
JQuery球队选择实例
May 18 #Javascript
JQuery实现动态添加删除评论的方法
May 18 #Javascript
TypeError document.getElementById(...) is null错误原因
May 18 #Javascript
JQuery实现带排序功能的权限选择实例
May 18 #Javascript
JQuery中clone方法复制节点
May 18 #Javascript
分享十五款 jQuery 社交网络分享插件
May 16 #Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 #Javascript
You might like
简单谈谈PHP中的Reload操作
2016/12/12 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python常用模块介绍
2014/11/21 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python判断有效的数独算法示例
2019/02/23 Python
详解Python3 pickle模块用法
2019/09/16 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
财务助理岗位职责
2013/11/10 职场文书
学生安全责任书
2014/04/15 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
2014年大学生工作总结
2014/11/20 职场文书
实习计划书范文
2015/01/16 职场文书
论语读书笔记
2015/06/26 职场文书
诉讼和解协议书
2016/03/23 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android
create-react-app开发常用配置教程
2022/06/25 Javascript