如何使用 LOAD 或 HTML 来最好地 UNLOAD DIV 中的内容来管理资源?

发布于 2024-12-19 04:00:52 字数 1193 浏览 0 评论 0原文

我正在使用 jQuery 1.6.2。

在母版页中,我打开几个 div,稍后将通过使用按钮填充信息:

<input type="button" id="ButtonOne">
<input type="button" id="ButtonTwo">
<input type="button" id="ButtonThree">
<div class="SectionDiv" id="DivOne"></div>
<div class="SectionDiv" id="DivTwo"></div>
<div class="SectionDiv" id="DivThree"></div>

我进行调用来填充 div,如下所示:

$("#ButtonOne").click(function() {
    $("#DivOne").load("FileOne.html");
});

当我填充一个 div 时,我想删除另一个 div 中的所有内容分区。我用两种不同的方式做到了这一点。像这样:

// METHOD ONE
$("#ButtonOne").click(function() {
    // UNLOAD ALL DIVS
    $(".SectionDiv").load("BlankPage.html");
    // LOAD THE DIV THAT NEEDS TO BE LOADED
    $("#DivOne").load("FileOne.html");
});

// METHOD TWO
$("#ButtonOne").click(function() {
    // UNLOAD ALL DIVS
    $(".SectionDiv").html("");
    // LOAD THE DIV THAT NEEDS TO BE LOADED
    $("#DivOne").load("FileOne.html");
});

在方法一中,我加载了一个没有内容的页面(一个完全空的页面)的 div。在方法二中,我使用 html("") 具有相同的效果(?)。

虽然这两种方法具有相同的视觉结果,但在删除 div 中的现有变量或更好地从 DOM 中分离元素等方面,其中一种方法是否比另一种方法具有明显的优势?在某些环境中,一个比另一个更快吗?一个人比另一个人占用更多资源吗?

I am using jQuery 1.6.2.

In a master page, I open up several divs that will later be populated with info through the use of buttons:

<input type="button" id="ButtonOne">
<input type="button" id="ButtonTwo">
<input type="button" id="ButtonThree">
<div class="SectionDiv" id="DivOne"></div>
<div class="SectionDiv" id="DivTwo"></div>
<div class="SectionDiv" id="DivThree"></div>

I make a call to populate the divs like this:

$("#ButtonOne").click(function() {
    $("#DivOne").load("FileOne.html");
});

When I popule a div, I want to get rid of everything in the other divs. I have done this two different ways. Like this:

// METHOD ONE
$("#ButtonOne").click(function() {
    // UNLOAD ALL DIVS
    $(".SectionDiv").load("BlankPage.html");
    // LOAD THE DIV THAT NEEDS TO BE LOADED
    $("#DivOne").load("FileOne.html");
});

// METHOD TWO
$("#ButtonOne").click(function() {
    // UNLOAD ALL DIVS
    $(".SectionDiv").html("");
    // LOAD THE DIV THAT NEEDS TO BE LOADED
    $("#DivOne").load("FileOne.html");
});

In method one, I load the div with a page that has no content, a completely empty page. In method two, I use html("") with the same effect(?).

While these two methods have the same visual outcome, does one have a distinct advantage over the other for killing existing variables in the divs, or detaching elements better from the DOM, or anything? Is one faster in certain environments than the other? Does one hog more resources than the other?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

一花一树开 2024-12-26 04:00:52

方法一导致请求无缘无故地获取空白页(因为你知道它是空白的,所以不需要请求)。所以本质上方法二是方法一的优化版本,因为它节省了无用的额外 HTTP 请求。

Method one causes a request to get the blank page for no reason (because you know it is blank, there is no need for a request). So essentially method two is the optimized version of method one because it saves the useless additional HTTP requests.

反话 2024-12-26 04:00:52
$(".SectionDiv").each(function(index, ele){
ele.html("");
});

尝试上述操作,由于有多个 .SectionDiv 元素,因此您必须循环遍历每个元素。

$(".SectionDiv").each(function(index, ele){
ele.html("");
});

try the above, since there are more than one .SectionDiv element, you have to loop for each element.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文