如何動態創建多個 ul 列表？

Question

我有一個<ul> “ul-list-one”，其中包含許多復選框。 如果我選中復選框並單擊移動按鈕，則意味着它將移動到另一個<ul> "ul-list-two"，並且選中的復選框將從上一個中刪除，這里將是 "ul-list-one ”。

在“ul-list-two”中，我可以做同樣的事情，它移動到下一個，這次是“ul-list-three”。

注意：“ul-list-two”和“ul-li-three”將動態創建。

在這里我做了一些工作，但是我怎樣才能動態地創建多個<ul>呢？

      $('#mer').click( function() {
        var txtBox = "";    
        var txtstatus = false;  
       $('input[type="checkbox"]').each (function() {             
        var t = $(this);
        var from = 'checklist';
        var val=$("#hidden_id").val();
        var to = 'ch';
        if (!t.is(':checked')){
            var swap = to;
            to = from;
            from = swap;
           } else { 
            txtstatus = true;
           }
       $(':checkbox:checked').attr('disabled', true);
       $('#'+to).append(t.attr('name', to).parent());
       $('#ch').addClass('br');        
       });
       if(txtstatus){
        txtBox = "<input type='text' value=''>";
        $('#ch').after(txtBox);
       }
      });  

      //close buttom code
      $('#cls').click( function() {
       $('input[type="checkbox"]').each (function() {          
        var t = $(this);
        var from = 'checklist';
        var to = 'ch';
        if (t.is(':checked')){
            var swap = to;
            to = from;
            from = swap;
           }
       $(':checkbox:checked').attr('disabled', false);
       $(':checkbox:checked').attr('checked', false);
       $('#'+from).append(t.attr('name', from).parent());
       });
      });      

Answer 1

不是我寫過的最漂亮的東西。 如果您想留下空的 ul，只需注釋掉 removeEmpties 調用。 我不擔心復選框的順序，但是在移動復選框后，很容易在單獨的 function 中實現。 我還假設您不希望它們向后移動超出初始 ul。 如果你想要這個功能，你可以添加另一個如果移動 function。

http://jsfiddle.net/pJgyu/13225/