jQuery 用另一个 DOM 完全替换元素的 DOM - 更快的方法？

Posted 2023-05-09

【中文标题】jQuery 用另一个 DOM 完全替换元素的 DOM - 更快的方法？

【英文标题】：jQuery complete replace DOM of element with another DOM - faster way?

【发布时间】：2013-05-15 16:22:17

【问题描述】：

我正在使用 jQuery 的 AJAX 从服务器获取新内容。数据以 JSON 格式加载：

$.ajax(
    url: url,
    data: 
        'ajax': '1',
    ,
    dataType: 'json',
    success: somefunction
);

由于服务器端应用程序限制，我无法在内部设置更多 JSON 变量，因此我必须将所有内容加载到内容中。这就是为什么我必须将结果加载到 jQuery 中，而不是搜索和替换页面上的某些元素，例如（在 somefunction 中使用）：

var somefunction = function(data) 
    var con = $('<div></div>').html(data.content); // just $(data.content) is not working
    $('div#mainContent').html(con.find('div#ajax-content').html());
    ... // same process with three more divs

编辑：请注意，我必须执行相同的过程来替换三个 div！

还有更多相关内容，但作为示例，我希望这已经足够了。我的问题：对于某种逻辑方式，我希望将结果加载到 DOM ($(data.content))、解析为 html (con.find('dix#ajax-content').html()) 并返回到 DOM ($('div#mainContent').html()) 在我看来就像失去一些资源并降低性能所以我想知道是否有更快的方法来直接加载 DOM，例如：

$('div#mainContent').dom(con.find('div#ajax-content').dom());

我试图用谷歌搜索它，但也许我不知道该输入什么。此外，jQuery 文档对我没有多大帮助。

一些事实：

jQuery 1.9.1 jQuery UI 1.10.3 可用

最后，我知道使用服务器端应用程序来提供更多 JSON 变量会更好，但是，我需要编写不太容易的代码，这需要更长的时间来开发我现在没有。目前在客户端执行此操作将是临时解决方案，但是，我不想大幅降低性能。

附带问题：

在这种情况下使用find()函数是正确的还是有更好的？

EDIT 2（无法解析字符串） 我期待这个工作，但它不是：

content = '<div id="ajax-title">Pečivo běžné, sladké, slané</div>
<div id="ajax-whereami"><a href="/category/4">Chléba a pečivo</a> » Pečivo běžné, sladké, slané</div>';
$(content);

【问题讨论】：

试试 data.content.toString()

@BASarat 我假设 data.content 是一个字符串。

@BASarat 比我无法解析它并在请求中找到特定 div 的内容。 data.content 无论如何都是字符串。它对标记为“不起作用”的行没有帮助。

@tomis 如果所有东西都需要替换 $('div#mainContent') 中的元素而不是你应该缓存它： $content=$('div#mainContent'); $content.find("something").replaceWith(con.find("somethingElse");

【参考方案1】：

我不确定这是否会有所帮助：

$('div#mainContent').replaceWith(con.find('div#ajax-content'))
 .attr("id","mainContent")

现在您不必设置元素的 html 并获取您刚刚从 JSON 创建的元素的 html。不确定这是否真的更快，但它确实跳过了 2 个 html() 步骤。

【讨论】：

嘿，这可能会有所帮助...我可以替换请求中的 id，所以它会比看起来更容易：$('div#mainContent').replaceWith(con.find('div#mainContent')); 它会工作吗？它有效吗？ （我是我自己没找到的笨蛋）。

根据文档，它应该可以工作。 replaceWith 将字符串、元素或 jquery 对象作为参数。 api.jquery.com/replaceWith

这还将从我的脚本中保存一个 .find() 函数。会尝试，如果可行，您的答案是接受答案的候选人（也许一些编辑对未来的访问者来说会很好:-)）。

@tomis 回过头来看我发现我遗漏了一些东西，我认为您必须替换 #mainContent 中的几个元素，但您正在寻找替换 #mainContent。在这种情况下，您可以取出 .find 部分并使用 .attr 重新设置 id。我会更新我的答案。

【参考方案2】：

实际上，$(data.content) 应该可以正常工作，但您必须记住，只能通过.filter() 而不是.find() 访问***元素。如果您希望定位的元素至少比根深一层，您应该使用.find()；在下面的示例中，您可以在适当的情况下将 .filter() 替换为 .find()。

var $con = $(data.content);
$('div#mainContent')
  .empty()
  .append($con.filter('div#ajax-content'))
  .append($con.filter('div#another-id'))
  .append($con.filter('div#and-another-id'));

您也可以将选择器组合在一起：

  .append($con.filter('div#ajax-content, div#another-id, div#and-another-id'));

最后，由于标识符只能在文档中出现一次，您可以删除 div 部分：

  .append($con.filter('#ajax-content, #another-id, #and-another-id'));

更新

好吧，当换行符出现在错误的地方时，jQuery 似乎无法正确评估 data.content；这应该适用于所有情况：

var wrapper = document.createElement('div');
wrapper.innerHTML = data.content;

var $con = $(wrapper);

【讨论】：

拜托，看看我的秒。编辑为$(data.content) 真的不行。

@tomis 您没有正确阅读我的答案；它工作正常here 使用.filter() 而不是.find()。

不，问题出在解析中，但我发现了：有换行符破坏了它。去掉换行符，就可以正常使用了。

@tomis 是的，或者在行尾添加反斜杠，但更优选的方式是使用+ 追加多行。

是的...正在考虑如何解决这个问题 :-) 无论如何感谢您的帮助。

【参考方案3】：

您可以使用.load，尽管我相信它本质上只是同一事物的包装器：

$("#mainContent").load(url + " #ajax-content", data);

您可以通过仅发送特定的 ajax 内容（较少下载和解析）来提高服务器端的性能，尽管这可能很困难。

除此之外，最好的办法是在 jQuery 上使用 vanilla JS，至少用于附加（直接使用 innerHTML）。

【讨论】：

也许你会纠正我，但我在使用.load() 时无法处理错误状态，可以吗？不太可能，我必须替换完整放置在不同位置的 3 个 div 的内容，以及页面标题（这很简单）。不接受三个请求（innerHTML 解决方案、加载解决方案）。不过还是谢谢。

@tomis 你仍然可以在三个单独的 div 上执行innerHTML，它只需要在一个循环中

.load() 是否清除目标元素？我以为它只是附加到它上面。

@Jack 来自 doc，似乎已被替换：(...) .load() 将匹配元素的 HTML 内容设置为返回的数据。 (...)