jQuery:分离并重新附加元素，而无需重新加载内容

jQuery: detach and re-attach element without reloading content

本文关键字：新加载 加载 分离 新附加 元素 jQuery      更新时间：2023-09-26

我想知道是否可以使用 jQuery 分离元素（例如div）然后将其重新附加到 DOM 而无需重新加载元素中的内容。

请考虑以下示例布局：

<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <img src="something.jpg" />
        </div>
        <div class="card">
            <img src="something.jpg" />
        </div>
        <div class="card">
            <iframe src="example.com" id="widget">
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <!-- User hides this card -->
            <img src="something.jpg" />
        </div>
        <div class="card">
            <iframe src="example.com" id="widget">
        </div>
    </div>
</div>

第一列有 3 张卡片，第二列有 2 张卡片。如果用户在第二列中隐藏了其中一张卡片，我想通过将其中一张卡片从第一列移动到第二列来重新堆叠卡片，以便现在每列中有两张卡片。我可以使用.detach()轻松.appendTo()来完成此操作，但是当我将卡片从第一列重新附加到第二列时，该卡片包含的任何内容都会重新加载，无论是图像还是小部件，例如嵌入式推文。

我想知道的是，是否可以在不触发其中的内容重新加载的情况下将卡片从一列移动到另一列。

使用 .clone() 似乎不会再次请求资源。请注意，.detach() 是在 .appendTo() 之后调用的。

另请注意，带有document的元素id应该是唯一的;具有id "widget"的两个元素在问题html范围内;尝试更改为class="widget" 

$(".col-lg-6:eq(1) div").click(function(e) {
  $(e.target).hide();
  var clone = $(".col-lg-6:eq(0) div:eq(0)").clone();  
  clone.appendTo(".col-lg-6:eq(1)");
  $(".col-lg-6:eq(0) div:first").detach();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <img src="http://lorempixel.com/50/50/nature" />
        </div>
        <div class="card">
            <img src="http://lorempixel.com/50/50/cats" />
        </div>
        <div class="card">
          <iframe src="example.com" class="widget"></iframe>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <!-- User hides this card -->
            <img src="http://lorempixel.com/50/50/sports" />
        </div>
        <div class="card">
          <iframe src="example.com" class="widget"></iframe>
        </div>
    </div>
</div>

相关文章：