将li从一个ul移动到另一个ul jQuery

Question

我正在尝试将一个无序列表中的项目移动到另一个列表中。第一次移动时可以正常工作，但是一旦移动了项目，我就无法将它们移回原来的位置。我制作了一个演示页面来说明我的问题。

请点击这里查看 -> jsfiddle

HTML

<table>
    <tr>
        <td>Numbers</td>
        <td>Letters</td>
    </tr>
    <tr>
        <td>
            <ul class='list1'>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </td>
        <td>
            <ul class='list2'>
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
                <li>e</li>
            </ul>
        </td>
    </tr>
</table>
<input type='button' value='<<' id='move_left' />
<input type='button' value='>>' id='move_right' />

jQuery

$('body').on('click', 'li', function() {
   $(this).toggleClass('selected');
});

$('#move_left').click(function() {
    $('.list1').append('<li>', $('.list2 .selected').text(), '</li>');
    $('.list2 .selected').remove();
});

$('#move_right').click(function() {
    $('.list2').append('<li>', $('.list1 .selected').text(), '</li>');
    $('.list1 .selected').remove();
});

CSS

ul {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

.selected {
    background-color:#efefef;
}

您可以看到物品从左向右或从右向左移动，但一旦它们被移动，我就无法将它们移回。需要帮助，谢谢。

- i_me_mine

---

有没有一种方法可以不使用jQuery，而是使用纯JavaScript来完成相同的操作？ - Jatin Parmar

Answer 1

比你想象的更容易：

$('#move_left').click(function() {
    $('.list1').append($('.list2 .selected').removeClass('selected'));
});

$('#move_right').click(function() {
    $('.list2').append($('.list1 .selected').removeClass('selected'));
});

当您将现有元素附加到另一个元素时，它会被移动到那里。不需要像您之前所做的那样克隆元素并手动删除原始元素。

http://jsfiddle.net/KjJCa/2/

- bfavaretto

---

非常棒！感谢您提供的示例代码和清晰的解释。 - i_me_mine

Answer 2

尝试：

$('#move_left').click(function() {
    $('.list2 .selected').each(function(){
    $('.list1').append('<li>'+$(this).text()+'</li>');
    });
    $('.list2 .selected').remove();
});

$('#move_right').click(function() {
    $('.list1 .selected').each(function(){
    $('.list2').append('<li>'+$(this).text()+'</li>');
    });
    $('.list1 .selected').remove();
});

http://jsfiddle.net/liamallan1/KjJCa/3/

- Liam Allan