それぞれjqueryの問題

Question

jqueryで動的リストを作成しようとしています。私が持っているのは、ul要素と、リンクを含むul要素です。

<div id="new_list"></div> 
<ul id="old_list" class="listview"> 
    <li> 
     <a class="list" href="#">List I</a> 
     <ul class="sub"> 
     <li>1</li> 
     <li>2</li> 
     </ul> 
    </li> 
    <li> 
     <a class="list" href="#">List II</a> 
     <ul class="sub"> 
     <li>1</li> 
     <li>2</li> 
     </ul> 
    </li> 
</ul> 

何私はこのリストにやりたいことはある：

ユーザーが（ただクリックされたリンクの兄弟である）サブul要素のHTML、これらのリンクのいずれかをクリックすると、このようなnew_list divにコピーしてから可視にする必要があります。ここで コードです：

$("a.list").each(function() { 
    $(this).click(function() { 
     var listToShow = $(this).siblings("ul"); 
     $("#new_list").html(listToShow); 
     $("#old_list").hide(); 
     $("#new_list").show(); 
     return false; 
    }); 
}); 

このコードは、初めてすべてのリンクのために動作しますが、私はもう一度同じリンクをクリックすると、空のリストがアップします。

何が欠けていますか？

ありがとうございました。

Answer 1

htmlでDOM要素またはjQuery選択肢を使用すると、要素は以前の場所から削除され、DOM内の新しい場所に移動されます。

あなたが場所にコピーしたい場合は、.cloneを使用する必要があります。

var listToShow = $(this).siblings("ul").clone(); 

も注意してくださいあなたがそこにeachコールを必要としないこと：ハンドラは、各要素に自動的に適用されます選択。

$("a.list").click(function() { 
    var listToShow = $(this).siblings("ul").clone(); 
    $("#new_list").html(listToShow); 
    $("#old_list").hide(); 
    $("#new_list").show(); 
    return false; 
}); 

Answer 2

いつでもjQueryセレクタを呼び出すと、そのアクションは、すべてのオブジェクトがセレクタから返されます。これを試して。これはeach();

$('a.list').live('click', function() { 
    var listToShow = $(this).siblings("ul"); 
    $("#new_list").html(listToShow); 
    $("#old_list").hide(); 
    $("#new_list").show(); 
    return false; 
}); 

テーマにいくつかの教育のためにこれらのリンクをチェックアウト

http://api.jquery.com/click/

http://api.jquery.com/bind/

を使用せずに、クラス listで現在および将来のすべての <a>アンカータグに関数をバインドします

http://api.jquery.com/live/

Answer 3

このようなものを試してください。お役に立てれば。

$('#old_list').delegate('a.list', 'click', function() { 
    $(this).siblings('ul.sub').clone().appendTo('#new_list'); 
}); 

あなたは代わりにそれをコピーするそれを移動したい場合は.clone（）を外します。