Swapping div Inhalte mit jQuery

Question

Hier ist mein HTML:

<div class="large"> 
    <img src="/images/photos/Interior.jpg" alt="The interior" style="[...]" /> 
    <div class="caption">The interior</div> 
</div> 
<div class="small"> 
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" style="[A different ...]" /> 
    <div class="caption">A bedroom</div> 
</div> 

Nach einem div.small klicken, Ich mag würde sowohl die Bilder und Bildunterschriften Container Divs zu tauschen. Der Catch ist, ich kann nicht einfach den Quellcode tauschen, da es eine Reihe von Inline-Styles gibt, die beibehalten werden müssen. Nachdem die Bilder ausgetauscht wurden, möchte ich schließlich meine benutzerdefinierte Funktion .fitToParent() auf beide anwenden.

Wie würde ich das machen?

Answer 1

$(document).ready(function() { 
    $('div.small').click(function() { 
     var bigHtml = $('div.large').html(); 
     var smallHtml = $(this).html(); 

     $('div.large').html(smallHtml); 
     $('div.small').html(bigHtml); 

     //custom functions? 
    }); 
}); 

Answer 2

Markup ändern wenig:

<div id="large"> 

<div id="small"> 

Und dann in der Javascript können Sie tun:

var swap = function(fromId, toId){ 
    var temp = $(toId).html(); 
    $(toId).html($(fromId).html()); 
    $(fromId).html(temp); 
} 

Offensichtlich kann es gereinigt werden, aber Sie bekommen die Idee.

Answer 3

function swapContent(){ 
    var tempContent = $("div.large").html(); 
    $("div.large").empty().html($("div.small").html()); 
    $("div.small").empty().html(tempContent); 
} 

<div class="large"> 
    <img src="/images/photos/Interior.jpg" alt="The interior" style="[...]" /> 
    <div class="caption">The interior</div> 
</div> 
<div class="small" onclick="swapContent()"> 
    <img src="/images/photos/Bedroom.jpg" alt="Bedroom" style="[A different ...]" /> 
    <div class="caption">A bedroom</div> 
</div> 

Hoffe es hilft.