Как я могу обменять эти 2 div?

Question

Я получил пустой Div называется Target:

<div id="target"></div> 

и DIV называется список:

<div id="list"> 
    <ul> 
     <li><img id="1" src=".." /></li> 
     <li><img id="2" src=".." /></li> 
     <li><img id="3" src=".." /></li> 
    </ul> 
</div> 

То, что я хочу, по клику пользователя, получить IMG в сНу цели, и отрегулировать его размер к чему-то большему. Я могу сделать это легко.
Проблемы возникают, если пользователь нажимает на другой div или другую кнопку (стрелка или следующая кнопка в другом месте). Я хочу, чтобы 1-й div возвращался на свое место и заменялся новым (или следующим в списке , или 1-й, если его последний div, который находится на дисплее).
Я пробовал пару способов, но мой jQuery еще недостаточно хорош.

(прежде чем кто-спросить, все местные, не на стороне сервера, если это меняет что-нибудь)

Answer 1

Я не уверен вообще, если это лучший способ или даже эффективный способ сделать это, но он, кажется, делает то, что вам нужно.

DEMO: Using cloning

$("ul li img").on("click", function() { 
    var currentImage = $(this); 
    var hiddenImage = $("ul li img[hidden='hidden']"); 

    $("#target").html(""); 
    currentImage.clone().appendTo('#target'); 

    hiddenImage.removeAttr("hidden"); 
    currentImage.attr("hidden", "hidden"); 
});​ 

Согласно комментариям некоторых элементов может быть видео файлы. Вместо того, чтобы использовать clone(), вы можете перемещать элементы и оставлять место за спиной.

DEMO: Using a place-holder

$("ul li img").on("click", function() { 
    var currentImage = $(this); 
    var lastImage = $("#target img"); 
    var placeHolder = $("#last-image-position"); 

    lastImage.insertBefore("#last-image-position"); 
    $("#last-image-position").remove(); 

    $("<div id='last-image-position'><div>").insertBefore(currentImage); 

    currentImage.appendTo('#target'); 
});​ 

Редактировать
Обновленные демки с реальными изображениями.

Answer 2

Может быть, вы не имел в виду это:

$('#target').replaceWith($('#list')); 

Answer 3

работает демо обменивать содержание сНа: http://jsfiddle.net/BKNjB/2/

Пожалуйста, дайте мне знать, если я не права. :)

Поведение - будет 2 оповещения before и after, отдых ниже плохой смысл.

Или может быть это: http://jsfiddle.net/vJTyf/6/или свопа таких изображений что-то поменять местами каждый раз изображение, которое вы будете нажать на изображение: http://jsfiddle.net/vJTyf/9/ (да, вы могли бы сделать это более аккуратным образом :)

кода

$(document).ready(function() { 
    alert(' Before swap HTML in target is :==> ' + $('#target').html()); 

     var targetHtml = $('#target').html(); 
     var listHtml = $('#list').html(); 

     $('#target').html(listHtml); 
     $('#list').html(targetHtml); 

    alert(' After swap HTML in target is :==> ' + $('#target').html()); 

});​ 

Answer 4

Может быть, вы хотите, чтобы это

$(function(){ 
    $('#list li').on('click', 'img', function(e){ 
     var img=$(this); 
     $('#target').html(img.clone()) .width(img.width()).height(img.height()); 
    }); 

    $('#target').on('click', function(e){ 
     $(this).html('').prop('title', '').width(200).height(200); // original size 
    }) 
    .on('mouseenter', function(e){ 
     if($(this).html()!='') $(this).prop('title', 'Click to clear'); 
    }) 
    .on('mouseleave', function(e){ 
     $(this).prop('title', ''); 
    });    
}); 

DEMO.

Update: (что вы просили)

$(function(){ 
    $('#list li').on('click', 'img', function(e){ 
     if($('#target').html()!='') 
     { 
      $('#list ul li:empty').html($('#target').html()); 
     } 
     var img=$(this); 
     $('#target').html(img).width(img.width()).height(img.height()); 
    }); 

    $('#target').on('click', function(e){ 
     $('#list ul li:empty').html($('#target').html()); 
     $(this).html('').prop('title', '').width(200).height(200); 
    }) 
    .on('mouseenter', function(e){ 
     if($(this).html()!='') $(this).prop('title', 'Click to clear'); 
    }) 
    .on('mouseleave', function(e){ 
     $(this).prop('title', ''); 
    });    
}); 

DEMO.