javascript - Swapping div contents with jQuery - Stack Overflow

admin管理员组

文章数量:1203973

Here's my 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>

Upon clicking a div.small, I'd like both the images and captions to swap container divs. The catch is I can't just swap the src, as there are a bunch of inline styles set which need to be preserved. Finally, once the images have been swapped, I want to apply my custom function .fitToParent() to both of them.

How would I go about doing this?

Here's my 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>

Upon clicking a div.small, I'd like both the images and captions to swap container divs. The catch is I can't just swap the src, as there are a bunch of inline styles set which need to be preserved. Finally, once the images have been swapped, I want to apply my custom function .fitToParent() to both of them.

How would I go about doing this?

• javascript
• jquery
• html
• swap

Share Improve this question Follow asked Sep 4, 2009 at 18:24 EricEric 97.6k5454 gold badges254254 silver badges388388 bronze badges 1

• 8 Lol rofl etc. !! I just found myself looking for a good way to swap div contents using jQuery. And look who answered this question..... – Ropstah Commented Mar 19, 2010 at 16:18

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 16

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

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>

Hope it helps.

Change your markup a little:

<div id="large">

<div id="small">

And then in the Javascript you can do:

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

Obviously it can be cleaned up, but you get the idea.

本文标签： javascriptSwapping div contents with jQueryStack Overflow