通过不同的容器用jQuery交换或移动DOM元素

Question

伙计们，我有下一个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>

我需要将div“data”中的内容与一个上部div“Dummy”或videoDummy交换，并在用户单击下一个/上一个链接（类启动视频）时将其带回内容而不会丢失数据。

我将如何使用jQuery javascript进行此操作？

Answer 1

你的意思是这样的吗？

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