通过不同的容器使用 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;
});