使用 appendTo 将列表项移动到底部答案

【问题标题】：Move list item to bottom with appendTo使用 appendTo 将列表项移动到底部
【发布时间】：2014-05-26 13:08:27
【问题描述】：

我正在尝试使用 appendTo 将我的列表项移动到底部。当我使用“ul”和“li”符号时它正在工作，但我希望它只在单击复选框时发生。所以我尝试使用 this.parent()，但我有点卡住了。看不出这里出了什么问题..fiddle

我的 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>

脚本：

$('.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);
        });
    };
});

【问题讨论】：

标签： jquery html list appendto

【解决方案1】：

在slideUp 的回调函数中，this 的值发生了变化，现在是 LI，而不是复选框

$('.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) );
        });
    };
});

【讨论】：