Question

我想问一下，如何处理页面上的许多元素，如下所示：

<div id="tab1">
  ... hundreds of <div>'s
</div>
<div id="tab2">
  ... hundreds of <div>'s
</div>
etc...

按需使用AJAX加载那些数百个div。问题是，有更多的选项卡，每个选项卡在DOM中包含大量元素，这使得所有操作越来越慢，因为更多选项卡加载了内容。

是否有一种简单的方法可以临时删除不可见标签中的元素，并在点击某个标签后可以按需退回？

当然我不想使用$('#tab1 .content').hide();，因为它只会使此标签的内容不可见，但内容仍然在DOM中。

感谢您提前提供任何帮助。

编辑：我想重复使用以前提取的（缓存）内容。因此，重新打开之前打开的选项卡之一不需要重复的AJAX调用。

Answer 1

您尝试做的事情有几种解决方案。

Omar的解决方案有效，但它有一些缺点 - 任何附加的事件处理程序都会丢失。委派的事件处理程序可以处理这种情况......

另一个选项，更纯粹的Javascript，就是创建一个文档片段，然后将所有选项卡元素移动到要放回的片段中。

var tab1 = document.getElementById("tab1");
var frag1 = document.createDocumentFragment();
while (tab.firstChild) {
  frag1.appendChild(tab.firstChild);
}

// At this point, all the elements will be in `frag` -- in reverse order.
// Not an issue -- just reverse the loop to put everything back.

编辑

var tab1 = document.getElementById("tab1");
while (frag1.firstChild) {
  tab1.appendChild(frag1.firstChild);
}

Answer 2

您可以使用jquery轻松点对象

tab1=$("#tab1").html();

要删除它$("#tab1").html("");
重新加载$("#tab1").html(tab1)

如何快速临时从DOM中删除元素并按需返回？

2 个答案: