Как переместить объект кликнув на него с помощью jQuery?

Question

[selfish]

Есть два обычных списка:

Первый генерируется автоматически

<pre><code class="html">&lt;ul id=&quot;photos&quot;&gt;
	&lt;li&gt;1&lt;/li&gt;
	&lt;li&gt;2&lt;/li&gt;
&lt;/ul&gt;

и

<ul id="choose"><br>
	<li>1</li><br>
	<li>2</li><br>
</ul><br>

Необходимо что бы при нажатии на <li> </li><br> объект перемещался в другой список.

На сколько понял нужно использовать append, но у меня перемещаются все <li><br>

Как можно это реализовать?

Answer 1

[Сергей Протько]

$('#choose, #photos').on('click', 'li', function(){
      var $target;
      if($(this).parents('ul').attr('id')=="photos")
          $target = $('#choose');
      else
          $target = $('#photos');

      $(this).appendTo($target);
    
});

Comments

[Сергей Протько]

При appendTo или append нода будет вырвана из списка и перенесена в другой. Собственно вы сами дали ответ на свой вопрос.

[creage]

Простите за занудство, но я бы закешировал $(this) — у вас в коде к нему два обращения.

[creage]

И да — parents полезет по всему дереву вверх, лучше просто .parent

[Сергей Протько]

Оптимизацией потом заняться можно. Касательно $(this) — тут да, стоило бы закешировать. Хотя по сути можно передать this в append у таргета и тогда вызов был бы один.

А что до parents — ну тут да, конкретно в этом случае смысла применять parents нету. Просто что-то под вечер мозг тормозит.