Question

我想知道是否可以使用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()完成此操作，但是当我将卡从第一列重新连接到第二列时，无论卡片包含哪些内容都会被重新加载，无论是图片还是小部件例如嵌入式推文。

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

Answer 1

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

另请注意，id元素的document应该是唯一的; 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>

jQuery：分离并重新附加元素而不重新加载内容

1 个答案: