如何在另一个元素加载后移动一个元素答案

【问题标题】：How to move an element after another has loaded如何在另一个元素加载后移动一个元素
【发布时间】：2017-10-25 10:07:22
【问题描述】：

我有一个花式框模式/幻灯片，一旦您单击页面上的某个项目，它就会被激活。然后它会创建一个容器 div，并将其放置在 body 标记的顶部。

我想将此容器 div 嵌套在页面上的 #content div 中。尝试使用 jQuery .appendTo 方法，但它不起作用。我假设这是因为我需要在 fancybox 容器 div 加载后调用这个函数。这是我到目前为止的地方：

jQuery(document).ready(function($) {
  $(".fancybox-container").load($(this), function(){
    $('.fancybox-container').appendTo('#content');
  });
});

<body>
  <div class="fancybox-container"></div>
    <section id="content">
      <a id="fancy-item" href="#"></a> <!-- When clicked this creates the fancybox container -->
   </section>
</body>

【问题讨论】：

标签： jquery fancybox fancybox-3

【解决方案1】：

由于您提到的选择器，我假设您使用的是 fancybox v3.x。如果这是真的，那么只需在您的调用中使用parentEl API 选项，例如：

jQuery(document).ready(function ($) {
    $("#fancy-item").fancybox({
        // API options
        parentEl: "#content"
    }); // fancybox
}); // ready

这会将fancybox容器嵌套在带有content ID的部分中

对于fancybox v2.x，请改用parent。

【讨论】：