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 相关文章推荐
jQuery代码优化 事件委托篇
Nov 01 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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性能测试工具xhprof的详解
2013/06/03 PHP
PHP防止跨域提交表单
2013/11/01 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
javascript 树形导航菜单实例代码
2013/08/13 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
常用的javascript设计模式
2017/01/11 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
vue实现简单图片上传
2020/06/30 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
Python-for循环的内部机制
2020/06/12 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
银行介绍信范文
2014/01/10 职场文书
十岁生日答谢词
2015/01/05 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
会计求职简历自我评价
2015/03/10 职场文书
公司老总年会致辞
2015/07/30 职场文书
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android