JQuery中两个ul标签的li互相移动实现方法
更新时间：2015年05月18日 11:13:57 作者：永远爱好写程序
这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
Jquery 实现Tab效果，思路就是普通的用js的思路控制的，脚本之家发布过更精简的代码，这个比较适合一直用js开始学用jquery控制的朋友一个参考。2010-03-03
要快速结束一个当前正在执行的jquery 动画时可以在执行当前动画的对象上执行 stop(true)方法，下面有个不错的示例感兴趣的朋友不要错过2013-11-11
用了post方法去处理ajax回调的json数据，死活取不到，后台就是有json返回了，关于这个问题的解决方法如下，你若遇到可以看看2014-11-11
这篇文章主要为大家详细介绍了jQuery实现简单弹幕制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
jquery实现（textarea）placeholder自动换行
本文主要对jquery如何实现（textarea） placeholder自动换行的方法、思路进行介绍，下面就跟小编一起来看下吧2016-12-12
这篇文章主要为大家详细介绍了jQuery Ajax上传文件的相关代码,需要的朋友可以参考下2016-03-03
jQuery实现限制textarea文本框输入字符数量的方法
这篇文章主要介绍了jQuery实现限制textarea文本框输入字符数量的方法,涉及jQuery键盘事件及页面元素的相关操作技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了jquery实现动态菜单的实例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
easyui中combotree循环获取父节点至根节点并输出路径实现方法
下面小编就为大家带来一篇easyui中combotree循环获取父节点至根节点并输出路径实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了jQuery匹配文档链接并添加class的方法,涉及jQuery元素匹配与样式操作的相关技巧,需要的朋友可以参考下2015-06-06
最新评论