jQuery - добавляйте только новые div, оставляйте старые в покое

Question

У меня есть 2 родительских элемента div (старый и новый), если я нажимаю кнопку Click to Add, я пытаюсь получить элементы div в новом списке для «слияния» со старым списком и удаления нового списка. Есть 2 id = "div3" один в старом и один в новом. Когда они объединены старые> id = "div3" должны перезаписать новый> id = "div3" или просто удалить себя. Причина, по которой идентификаторы div могут повторяться, заключается в том, что id = "new"> divs будут выводиться с сервера, а я просто хочу уникальные идентификаторы в старом списке.

<span id="adder">Click 2 Add</span>

<div id="old">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>

<div id="new">
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
</div>

http://jsfiddle.net/5kDGR/12/

Answer 1

Это то, что вы хотите?http://jsfiddle.net/5kDGR/17/

   $("#adder").click(function() {

   var content = $('<div/>');
   $('#new div').each (function()
                    {
                        content.append(this);
                    });
   $('#old div').each(function ()
   {
      if (!($(content).find('#' + $(this).attr('id')).length))
      {
          content.prepend(this);
      }
   });
   $('#old').html(content);
   $('#new').remove();
});