1つのリストから別のリストにli要素を移動する方法

Question

ここでは、あるリストから別のリストに要素全体を移動しています。必要なのは、リストから特定のli要素を選択し、ボタンをクリックするだけです別のリスト。 は、ここに私のコード

$(document).ready(function() { 
    $("#add").click(function() { 
     $("#list1 li").appendTo('#list2'); 
    }); 
}); 

と

<div> 
    <asp:ListView ID="ListView1" runat="server"> 
     <LayoutTemplate> 
      <ul id="list1" class="connectedSortable"> 
       <asp:PlaceHolder runat="server" id="itemPlaceholder"></asp:PlaceHolder> 
      </ul> 
     </LayoutTemplate> 
     <ItemTemplate>  
      <li class="ui-state-default" ><%# Eval("value") %></li>  
     </ItemTemplate> 
    </asp:ListView> 

    <asp:ListView ID="ListView2" runat="server"> 
     <LayoutTemplate> 
      <ul id="list2" class="connectedSortable"> 
       <asp:PlaceHolder runat="server" id="itemPlaceholder"></asp:PlaceHolder> 
      </ul> 
     </LayoutTemplate> 
     <ItemTemplate>  
      <li class="ui-state-highlight" ><%# Eval("value2") %></li>  
     </ItemTemplate> 
    </asp:ListView> 
    <input id="add" name="add" type="button" value="add" /><br /> 
</div> 

任意の提案ですか？

Answer 1

last()の仕事のようですね。

$(document).ready(function() { 
    $("#add").click(function() { 
     $("#list1 li").last().appendTo('#list2'); 
    }); 
}); 

EDITは：

$("#list1 li").click(function() { 
    $(this).appendTo('#list2'); 
}); 

追加EDIT：特定の項目を移動するには、リストの項目をクリック可能にするには、[追加]ボタンをクリックしたときにその項目を追加（テストしていません）。あなただけのli要素を歌う移動した場合

$("#list1 li").click(function() { 
    $("list1 li.clicked").removeClass("clicked"); 
    $(this).addClass("clicked"); 
}); 
$("#add").click(function() { 
    $("#list1 li.clicked").removeClass("clicked").appendTo('#list2'); 
}); 

Answer 2

はこれを試してみてください：http://jsfiddle.net/jKvZB/2/

list 1: 
<ul id="list1"> 
    <li>hello</li> 
    <li>world</li> 
</ul> 
<br /> 
list 2: 
<ul id="list2"> 
    <li>goodbye</li> 
</ul> 

<a href="#" id="listSwap">go</a> 


$(document).ready(function() { 
    $("#listSwap").click(function() { 
     $("#list1 li:nth-child(2)").hide(); 
     $("#list2").append("<li>"+$("#list1 li:nth-child(2)").html()+"</li>"); 
    }); 
}); 

それはかなり基本的ですが、私はあなたがそこから出て働くことができると確信しています。

Answer 3

は、各li要素の一意の属性を持って、その後、いずれかを選択し、他の要素に追加するjqueryのセレクタ機能を使用する必要があります。これはかもしれ

はあなたを助けることができる：Daveの答えに似

<ul id="list1"> 
    <li class="ui-state-default 01"> list1-1</li> 
    <li class="ui-state-default 02"> list1-2</li> 
    <li class="ui-state-default 03"> list1-3</li> 
</ul> 
<ul id="list2"></ul> 

    $("#list1 .01").appendTo($("#list2")); 
    or 
    $("#list1 li:last").appendTo($("#list2")); 

。

Answer 4

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".add").click(function() { 
      $(this).appendTo('#list2'); 
     }); 
    }); 
</script> 

これは、クリックされた特定の要素が移動されるようになります。リのクラスが「追加」であることを確認してください