2011-04-15 21 views
0

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

<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; 
    }); 
}); 

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

何が欠けていますか?

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

+2

私は 'each()'が必要ではないと思います。 – Blender

答えて

0

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; 
}); 
0

いつでも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/

0

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

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

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

関連する問題