javascript - 如何动态创建多个 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 调用即可。我不担心复选框的顺序，但在移动复选框后在单独的函数中实现会很容易。我还假设您不希望它们向后移动超出初始 ul。如果您想要该功能，只需将另一个 else if 添加到 move 函数即可。

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