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

Question

我目前正在开发一个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服务器。因此，这种机制应该不依赖于服务器技术！ 很明显，网站应该尽可能地跨浏览器。

-

非常感谢您的任何建议。

Answer 1

如果你做了合适的关闭，它可能会有效：

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

Answer 2

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

这样的事情：

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

在这种情况下代码可能有误，但想法是一样的！ 或者在使用$ .each函数后使用$ .find（）函数！

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

希望它有所帮助！