проблема с 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> 

Что я хочу делать с этим списком:

, когда пользователь нажимает любую из этих ссылок, HTML суб ul элемента (который является сестринским ссылку, которая просто щелкнули) должен быть скопирован в 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

Когда вы используете элемент DOM или выбор jQuery в html, элементы удаляются с того места, где они были ранее, и перемещаются в новое место в 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, действия, предпринятые над ним, влияют на все объекты, которые возвращает селектор. Попробуй это. Это будет связать функцию всех текущих и будущих тэгов <a> анкерных с классом list без использования 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/

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

Answer 3

Попробуйте что-нибудь подобное. Надеюсь это поможет.

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

Удалить .clone(), если вы хотите, чтобы переместить его вместо его копирования.