swap or move DOM elements with jQuery through different containers

Question

Hi, guys, I have the next HTML:

<div id="Dummy" class="video">
   <div class="videoDummy">Video Dummy</div>
</div>

<div class="bd">
 <ul class="items">
    <li class="video">
       <a href="#" class="launch-video vid_{{VAR:vid_contentId}}">
         {{module:video_imagethumbnail/contentId={VAR:contentId}}·clippingWidth=68}}
       </a>
       <div class="data">
          <div class="player">
            {{MODULE:Flashmedia/contentId=VAR:vid_contentId}}·type=video}}
          </div>
       </div><!-- .data -->
     </li>
    <li class="video">
       <a href="#" class="launch-video vid_{{VAR:vid_contentId}}">
         {{module:video_imagethumbnail/contentId={VAR:contentId}}·clippingWidth=68}}
       </a>
       <div class="data">
          <div class="player">
            {{MODULE:Flashmedia/contentId=VAR:vid_contentId}}·type=video}}
          </div>
       </div><!-- .data -->
     </li>
     <!-- ... and so on --->
  </ul>
</div>

I need to swap the content inside div "data" with the one upper div "Dummy" or videoDummy, and bring it back the content without lose data when user click the next/previous one link (class launch-video).

How would I go about doing this whith jQuery o javascript?

Answer 1

You mean something like this?

$("a.launch_video").click(function() {
  var data = $(this).next().html();
  $(this).next().html($("#Dummy").html());
  $("#Dummy").html(data);
  return false;
});