Search code examples
jqueryhtmllistappendto

Move list item to bottom with appendTo

I'm trying to move my list-item to the bottom by using appendTo. It's working when I use the 'ul' and 'li' notations, but I want it only to happen when clicking the checkbox. So I tried to use this.parent(), but I'm kinda stuck. Can't see what's going wrong here.. fiddle

My HTML:

<div class='todo_list'>
        <div class='add_list'>&#43; List</div><br>
        <h3 contenteditable='true'>New List</h3>
        <ul>
            <li>
                <input type='checkbox' class='task_status'>
                <p class='task' contenteditable='true'> </p>
                <span class='drag'></span>
            </li>
        </ul>
        <div class='add_task'>&#43;</div><br>
    </div>

The script:

$('.todo_list').on('click', '.task_status', function(e) {
    $(this).parent('li').css('opacity', '1');
    if ( $(this).is(':checked') ) {
        $(this).parent('li').css('opacity', '.5').delay(500).slideUp(500, function () {
            $(this).parent('li').parent('ul').appendTo( $(this).parent('li') );
            $(this).slideDown(500);
        });
    };
});
Solution

  • Inside the callback function for slideUp the value of this changes, and it's now the LI, not the checkbox

    $('.todo_list').on('click', '.task_status', function(e) {
    var LI = $(this).parent('li').css('opacity', '1');

    if ( $(this).is(':checked') ) {
        LI.css('opacity', '.5').delay(500).slideUp(500, function () {
            $(this).parent('ul').append( LI.slideDown(500) );
        });
    };
});