JQuery：用有效的 HTML 代码替换自定义 HTML 标记答案

【问题标题】：JQuery: Replacing custom HTML tags with valid HTML codeJQuery：用有效的 HTML 代码替换自定义 HTML 标记
【发布时间】：2012-02-19 11:58:52
【问题描述】：

我目前正在开发一个 AJAX 站点，我们使用自定义 HTML 标记来创建模板页面。

这是 HTML 部分：

<div id="main">
    <div>
        <ns:zone name="navigation" />
    </div>
    <div>
        <ns:zone name="page" />
    </div>
</div>

上面的例子工作得很好，下面的替换由 JQuery 完成：

$("ns\\:zone").each(function()
    {
        $(this).replaceWith(getHtml($(this).attr("name")));
    }
);

但是，您可能已经注意到 HTML 代码看起来会更好：

<div id="main">
    <ns:zone name="navigation" />
    <ns:zone name="page" />
</div>

不幸的是，在这种情况下，第一个“zone”标签会被正确替换，但第二个“zone”标签会消失。我不认为这是由于浏览器（我已经在 Chrome 和 Firefox 中测试过），而是由于 JQuery。难道是因为 JQuery “重建” DOM 树，并删除了我的“无效” HTML 标签？

我也尝试过使用 JQuery 的 html() 方法而不是 replaceWith()。结果是一样的。

你知道问题出在哪里吗？似乎 JQuery 是否支持自定义 HTML，但可能不正确？我应该设置自己的 xmlns 吗？

附带说明：该网站应允许客户非常轻松地创建自定义模板，或将购买的网站转换为我们的应用程序的模板。我们目前正在使用 PHP 开发 Web 服务，但我们可能会将应用程序的一部分移至 glassfish 服务器。因此，这种机制不应该依赖于服务器技术！很明显，网站应该尽可能跨浏览器。

非常感谢您的任何建议。

【问题讨论】：

我能听到您所有的客户都对您尖叫“我的 Google 排名哪里去了！？”
哈哈，好点子！我有一个想法，这可能是解决该问题的方法。仍然需要测试。
有传言说 Google 实际上会评估 AJAX 调用……但在投入生产之前，您需要对其进行广泛的测试。不过，通常情况下，您最好在服务器端解析模板。如果您绝对想为此目的使用 JS/jQuery，请考虑设置一个专用的 node.js 脚本 - 有可用的 DOM 模块，而且速度非常快。
不属于 HTML 的标签不是 HTML，如果认为它们是 HTML，则会产生奇怪的结果。当然，使其尽可能可定制的方法是操纵用户插入的 valid 标签
有效 html，可搜索并允许默认内容。

【解决方案1】：

如果你正确关闭它可能会起作用：

<ns:zone name="navigation"></ns:zone>
<ns:zone name="page"></ns:zone>

【讨论】：

这成功了！奇怪，我认为像
这样的速记标签关闭是“通用的”，可以应用于任何标签......出于好奇：有没有办法使该速记标签关闭与自定义标签一起工作？我不想告诉客户“是的，它有效，但你应该这样做而不是那样”...... :-) 感谢您的回答。
不，它不是，自结束标记是 XML 而不是 HTML，它取决于您的文档 MIME 类型，但通常在 XHTML 中，是的简写 foo>，但这仅适用于 XML 解析模式，并且大多数文档都以 text/html 的形式提供。在 HTML 5 中，仅表示。对于沉迷于 XML 的人来说，斜线只是语法糖。语法是有效的，但它不是“自闭合标签”。区别很重要，因为（至少在 HTML 语法中）
表示 HTML 5 中的
，而不是 XHTML 中的
。 jQuery 大概做了浏览器做的事情？

【解决方案2】：

我认为您应该在 select 函数中使用 '*' 属性来选择所有元素，然后对它们应用 $.each 函数！阅读this

类似这样的：

$('[*name]').each(function(){//do your stuff});

在这种情况下代码可能是错误的，但想法是一样的！或者在它们上使用 $.find() 函数，然后使用 $.each 函数！

您的代码只选择第一个元素，而不是全部。

希望对你有帮助！

【讨论】：