JQuery: Replacing custom HTML tags with valid HTML code

Question

I'm currently working on an AJAX site where we use custom HTML tags to create template pages.

This is the HTML part:

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

The above example works just fine, with the following substitution done by JQuery:

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

However, you may have noticed the HTML code could look much better like this:

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

Unfortunately, in that case, the first "zone" tag will be correctly replaced, but the second "zone" tag will disappear. I don't think it's due to the browser (I've tested it in Chrome and Firefox) but rather to JQuery. Could it be due to JQuery "rebuilding" the DOM tree, and deleting my "invalid" HTML tags?

I've also tried with JQuery's html() method instead of replaceWith(). The results are the same.

Do you see where the problem lies? It seems like JQuery does support custom HTML, but maybe not correctly? Should I setup my own xmlns?

As a side note: The website should allow the customer to very easily create a custom template, or to convert a bought website into a template for our application. We are currently developing the web services in PHP, but we may partially move a part of the application to a glassfish server. Therefore, this mechanism should not rely on the server technology! Quite obviously, the website should be as cross-browser as possible.

--

Thank you very much for any suggestion.

Answer 1

It would probably work if you did a proper closing:

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

Answer 2

I think you should use the '*' attribute in your select function to select all elements and then apply the $.each function on them! Read this

Something like this:

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

The code may be wrong in this case but the idea is the same! Or use the $.find() function on them and after use the $.each function!

Your code just selects the first element, not all.

Hope it helps!