从div中删除项目，并将其添加到另一个div（jquery/javascript）

-2

我有以下的html页面。当我点击移动按钮时，我想从第一个div删除特定项目（item2）并将其添加到第二个div。（最终这些项目将与图片更换..但这是后...）从div中删除项目，并将其添加到另一个div（jquery/javascript）

<!doctype html> 
<html> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

    <style> 
      #div1 { 
      width: 300px; 
      height: 200px; 
      float: left; 
      margin-right: 40px; 
      background: lightGrey; 
      } 

      #div1 li{ 
       width: 150px; 
       padding: 10px; 
       border-bottom: 1px solid white; 
       background: lightBlue; 
       color: white; 
      } 

      #div2 { 
      width: 300px; 
      height: 200px; 
      float: left; 
      margin-right: 40px; 
      background: lightGrey; 
      } 

      #div2 li{ 
       width: 150px; 
       padding: 10px; 
       border-bottom: 1px solid white; 
       background: lightBlue; 
       color: white; 
      } 
    </style> 
    <script> 

     function move() 
     { 
      //??? What goes here ??? 
     } 

     function show1() 
     { 
      alert($('#div1').html()); 
     } 

     function show2() 
     {    
      alert($('#div2').html()); 
     } 
    </script> 

<body> 
     <div id="div1"> 

      <li id="item1">Item 1</li> 
      <li id="item2">Item 2</li> 
      <li id="item3">Item 3</li> 
     </div> 

     <div id="div2"> 

      <li id="item4">Item 4</li> 
      <li id="item5">Item 5</li> 
      <li id="item6">Item 6</li> 
     </div> 

     <input type="button" value="Move" onClick="move()"/> 
     <input type="button" value="Show Div1 Elements" onClick="show1()"/> 
     <input type="button" value="Show Div2 Elements" onClick="show2()"/> 
</body> 
</html>

我应该在移动功能，写什么来实现这一目标？
当我点击显示Div1或显示Div2按钮时，它应该正确显示元素。
我需要跟踪这些，也就是找到哪些div有什么项目。

有什么建议吗？

来源

2013-07-22 Jasper

你可以试试这个代码，使用appendTo method：

function move() { 
    $('#item2').appendTo('#div2') 
}

来源

2013-07-22 12:08:24

卢卡斯我已经在这里发表相关拖n个墨滴问题：http://stackoverflow.com/questions/ 17788504 /拖和下拉式的项目，从一-DIV到另一个与 - 正确-HTML太jQuery的JAV – Jasper

-1

// From which you will get content  
var a=document.getElementById('youritem').innerHTML; 

// Get all content from container then append content and generate new content 
var c=document.getElementById('#div2').innerHTML; 
var b=a+c; 

// Then assign new content to Your div 
document.getElementById('#div2').innerHTML=b; 

// --------- or you can use 

function move() { 
    $('#item').appendTo('#yourdiv') 
}

来源

2013-07-22 12:12:06

您可以尝试

http://api.jquery.com/append/

和

http://api.jquery.com/remove/

您还可以

使用

http://api.jquery.com/children/

和

http://api.jquery.com/empty/

来源