-2

我有以下 html 页面。当我点击移动按钮时，我想从第一个 div 中删除一个特定项目（item2）并将其添加到第二个 div。（最终这些项目将被替换为图像......但那是为了以后......）

<!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>

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

有什么建议吗？

4

3 回答 3

1

您可以使用appendTo 方法尝试此代码：

function move() {
    $('#item2').appendTo('#div2')
}
于 2013-07-22T12:08:24.067 回答
0

你可以试试

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

和

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

你也可以

利用

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

和

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

于 2013-07-22T12:42:48.623 回答
-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-22T12:12:06.107 回答