JQuery中兩個ul標(biāo)簽的li互相移動實(shí)現(xiàn)方法
更新時間：2015年05月18日 11:13:57 作者：永遠(yuǎn)愛好寫程序
這篇文章主要介紹了JQuery中兩個ul標(biāo)簽的li互相移動實(shí)現(xiàn)方法,可實(shí)現(xiàn)ul標(biāo)簽中l(wèi)i標(biāo)簽內(nèi)容相互替換的技巧,涉及jQuery操作頁面元素的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JQuery中兩個ul標(biāo)簽的li互相移動實(shí)現(xiàn)方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<!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標(biāo)簽中的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": "葛優(yōu)", "Age": "58"}];
$(function () {
//動態(tài)添加Json數(shù)據(jù)到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程序設(shè)計有所幫助。
您可能感興趣的文章:
- Jquery和JS獲取ul中l(wèi)i標(biāo)簽的實(shí)現(xiàn)方法
- jQuery在ul中顯示某個li索引號的方法
- 加載列表時jquery獲取ul中第一個li的屬性
- jQuery動態(tài)添加及刪除表單上傳元素的方法(附demo源碼下載)
- Jquery動態(tài)添加及刪除頁面節(jié)點(diǎn)元素示例代碼
- jQuery動態(tài)添加、刪除元素的方法
- jquery動態(tài)增加text元素以及刪除文本內(nèi)容實(shí)例代碼
- jquery 如何動態(tài)添加、刪除class樣式方法介紹
- JQuery動態(tài)給table添加、刪除行 改進(jìn)版
- jQuery實(shí)現(xiàn)動態(tài)添加和刪除一個div
- jQuery實(shí)現(xiàn)動態(tài)刪除LI的方法
相關(guān)文章
DIY jquery plugin - tabs標(biāo)簽切換實(shí)現(xiàn)代碼
接觸jquery 2,3個月了，一直都未動手寫過插件。正好最近比較閑，就打算把一直看不順眼的項(xiàng)目中現(xiàn)有的tab改造一番（現(xiàn)有的tab未能做成一個控件，copy,past的代碼太多）。2010-12-12
Bootstrap 時間日歷插件bootstrap-datetimepicker配置與應(yīng)用小結(jié)
這篇文章主要介紹了Bootstrap 時間日歷插件bootstrap-datetimepicker配置與應(yīng)用小結(jié)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
擴(kuò)展對input的一些方法(練習(xí)jQuery插件)2009-10-10
可能老趙很反感IE6，所以他在自己的博客里面做了點(diǎn)手腳，如果是IE6瀏覽他的博客的話，那么就會跳轉(zhuǎn)到另一個頁面。2010-01-01
JQuery實(shí)現(xiàn)table中tr上移下移的示例(超簡單)
下面小編就為大家分享一篇JQuery實(shí)現(xiàn)table中tr上移下移的示例(超簡單)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
使用jQuery.load方法加載一個網(wǎng)頁，那么這個網(wǎng)頁內(nèi)部的js代碼是否能夠執(zhí)行呢，答案是肯定的，這就相當(dāng)于把load的內(nèi)容與主頁面進(jìn)行了合并一樣2011-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery排序插件tableSorter的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jquery實(shí)現(xiàn)煙花效果(面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了jquery面向?qū)ο髮?shí)現(xiàn)煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
jquery中獲取當(dāng)前鼠標(biāo)的x、y位置位置的代碼，需要的朋友可以參考下。2011-05-05
為JQuery EasyUI 表單組件增加焦點(diǎn)切換功能的方法
下面小編就為大家?guī)硪黄獮镴Query EasyUI 表單組件增加焦點(diǎn)切換功能的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04