<! 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> li in two ul tags move each other </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": "Andy Lau", "Age": "52 "}, {"Id": "2", "Name": "article", "Age": "26 "}, {"Id": "3", "Name": "Sun honglei", "Age": "40 "}, {"Id": "4", "Name": "Ge You", "Age": "58"}]; $ (Function (){ // Dynamically add Json data to 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 + "years old </li> "); $ MyLi. click (function (){ If ($ (this). parent (). attr ("id") = "leftUL "){ // Determine the ID of the parent element to control which UL to add // $ RightUL. append ($ (this); // method 1 $ (This). appendTo ($ rightUL); // method 2 } Else { $ (This). appendTo ($ leftUL); // method 2 } }); $ LeftUL. append ($ myLi ); } }); </Script> </Head> <Body> <Ul id = "leftUL"> </Ul> <Ul id = "rightUL"> </Ul> </Body> </Html> |