Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

moving li from one ul to another jQuery

I'm trying to move list items from one un-ordered list to another. This works fine the first time but once the items are moved I am unable to move them back. I made a fiddle to illustrate what i'm talking about.

Check it out here -> 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;
}

As you can see the items move from left to right or right to left, yet once they are moved i am unable to move them back. Any help is appreciated.

like image 746
i_me_mine Avatar asked Aug 30 '13 21:08

i_me_mine


2 Answers

It's easier than you think:

$('#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/

When you append an existing element to another, it is moved there. No need to clone the elements and manually remove the originals as you were doing.

like image 183
bfavaretto Avatar answered Oct 20 '22 20:10

bfavaretto


try:

$('#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/

like image 33
Liam Allan Avatar answered Oct 20 '22 18:10

Liam Allan