使用JQuery將LI從現有UL插入到UL中

Question

我有2個UL和一個按鈕

<ul class="droptrue ui-sortable" id="sortable1" style="min-height: 128px; mozuserselect: none;"
        unselectable="on">
        <li id="article_1" class="ui-state-default">
            <input type="checkbox" id="1" />
            Article #1</li>
        <li id="article_2" class="ui-state-default">
            <input type="checkbox" id="2" />
            Article #2</li>
        <li id="article_3" class="ui-state-default">
            <input type="checkbox" id="3" />
            Article #3</li>
</ul>


<ul class="droptrue ui-sortable" id="sortable2" style="min-height: 128px; mozuserselect: none;"
        unselectable="on">
        <li id="article_4" class="ui-state-default">
            <input type="checkbox" id="4" />
            Article #4</li>
        <li id="article_5" class="ui-state-default">
            <input type="checkbox" id="5" />
            Article #5</li>
        <li id="article_6" class="ui-state-default">
            <input type="checkbox" id="6" />
            Article #6</li>
    </ul>

<input type="button" id="add" value=">>" style="width: 15px" onclick="AddToList()" />

現在在按鈕上單擊我需要刪除相應的li形式“ sortable1”並將其插入“ sortable2”

我寫的功能像

function AddToList() {
        var vals = $('#sortable1 input:checkbox:checked').map(
         function() {               
             $("#sortable2").append($(this).parent().html());
             $(this).parent().remove();
             return this.id;
         }).get().join(',');                        
    }

但是此功能刪除了li，但僅將復選框添加到另一個ul中。 如果我給$（this）.parent（）。parent（）。html（）將所有li加到另一個ul。請告訴我我在這里缺少什么？

Answer 1

使用appendTo方法。

 var vals = $('#sortable1 input[type=checkbox]:checked').map(function() { 
     $(this).parent().appendTo('#sortable2');
     return this.id;
 }).get().join(',');