Javascript 使用jQuery交换div内容

这是我的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>

内地
卧室

单击一个

div.small

，我希望图像和标题都能交换容器div。问题是我不能只交换src，因为有一堆内联样式集需要保留。最后，一旦图像被交换，我想将我的自定义函数

.fitToParent（）

应用于这两个图像

---

我该怎么做呢？

稍微更改一下标记：

$(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?
    });
});

<div id="large">

<div id="small">

显然，它可以被清理，但你知道了。

函数swapContent（）{
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>

var tempContent=$（“div.large”）.html（）；
$（$div.large”）.empty（）.html（$（$div.small”）.html（）；
$（“div.small”）.empty（）.html（tempContent）；
}
内地
卧室

---

希望有帮助。

谢谢你的帮助。有人知道为什么我在将其粘贴到Visual Studio中时会丢失换行符吗？这非常有效，但会丢失绑定到div的所有事件（如“controlName.change（）”。使用detach和append会保留事件。请参阅，更改为id不是一个选项，因为有多个

div.small

Lol rofl等！！我刚刚发现自己正在寻找一种使用jQuery交换div内容的好方法。看看是谁回答了这个问题。。。。。

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>