代码之家 › 专栏 › 技术社区 › Daniel Bonnell

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

jquery javascript

Daniel Bonnell · 技术社区 · 9 年前

我想知道是否可以使用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张卡片,第二列有两张。如果用户隐藏了第二列中的一张牌,我想通过将其中一张牌从第一列移动到第二列来重新堆叠牌,这样现在每列中有两张牌。我可以使用 .detach() 和 .appendTo() 很容易,但当我将卡片从第一列重新附加到第二列时,卡片中包含的任何内容都会被重新加载,无论是图像还是小部件,如嵌入式Tweet。

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

1 回复 | 直到 9 年前

-1

guest271314 9 年前

使用 .clone() 似乎不会再次请求资源。笔记 .detach() 在之后调用 .appendTo() .

还要注意的是 id 元素的 document 应该是独一无二的;两个元件具有 身份证件 "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>