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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • Jquery和JS获取ul中li标签的实现方法

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

  • jquery 如何动态添加、删除class样式方法介绍

    取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 复制代码 代码如下: var p_class = $("p").attr("class"); //获取p元素的class [html] 使用attr()方法来设置p元素的class,JQuery代码如下: [code] 1 $("p").attr("'class", "

  • jQuery在ul中显示某个li索引号的方法

    本文实例讲述了jQuery在ul中显示某个li索引号的方法.分享给大家供大家参考.具体分析如下: 这段代码不仅适用于ul和li的元素索引号查找,也适用于其它带有包含关系的元素索引号查找,方法非常的巧妙 $("ul > li").click(function () { // http://www.jb51.net var index = $(this).prevAll().length; //prevAll([expr]): 查找当前元素之前所有的同辈元素 }); 希望本文所述对大

  • jQuery实现动态添加和删除一个div

    本文主要给大家简单介绍一下如何动态的在一个元素添加和删除一个div,希望能够得到举一反三之效. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #father { width:150px; height:150px; background-color:red; } #father div

  • JQuery动态给table添加、删除行 改进版

    复制代码 代码如下: <html> <head> <title> </title> <script src="js/jquery-1.4.2_min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> var row

  • Jquery动态添加及删除页面节点元素示例代码

    通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo

  • jQuery动态添加、删除元素的方法

    复制代码 代码如下: <script> $.schoolFn = { addItem: function(obj){ $("#itemList").append("<li id='liItrm' class='list-group-item clearfix'><span class='glyphicon glyphicon-resize-vertical sort-handle'></span>"+obj+"

  • jQuery实现动态删除LI的方法

    本文实例讲述了jQuery实现动态删除LI的方法.分享给大家供大家参考,具体如下: 我们有时候知道UL的id,但是苦不堪言的找不到LI进行清除,这边有一些办法可以参考,设置Li的id是不错的方法,但是千万别设置成一个ID,到时候删除只会删除第一个 可以使用 $("#ul li").not(":first").remove(); 这个方式可以删除不是第一个li的其他所有li. 我这边是用: $(document).ready(function(){ $("#

  • 加载列表时jquery获取ul中第一个li的属性

    当加载列表时,默认希望选中第一条.top_menu 为ul的ID 通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签.然后就可以利用 例如 修改属性:$("#top_menu li:first").attr("class","select"); 触发事件:$("#top_menu li:first").click(); 如果想获取li下的 a标签,如下: $("

  • jquery动态增加text元素以及删除文本内容实例代码

    jquery动态增加text元素以及删除文本内容实例代码

    这段代码是通过jquery动态增加限定数额的text(本例为5个) ,以及清除文本内容,用到了after()方法追加元素. <!--以下为script代码开始--> 复制代码 代码如下: <script> $(document).ready(function(){ var spotMax = 5;//限定添加text元素的总个数 var afterId = 0;//要追加元素的id var newId=1;//新生成text的id if($('table#vote').size()

  • jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

    jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

    本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d

随机推荐