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?

Я также пробовал использовать метод html () JQuery вместо replaceWith ().Результаты одинаковы.

Вы видите, в чем проблема?Кажется, что JQuery поддерживает собственный HTML, но, возможно, не правильно?Должен ли я настроить свои собственные xmlns?

В качестве примечания: сайт должен позволить клиенту очень легко создать собственный шаблон или преобразовать купленный веб-сайт в шаблон для нашего приложения.В настоящее время мы разрабатываем веб-сервисы на PHP, но можем частично перенести часть приложения на сервер Glassfish.Таким образом, этот механизм не должен полагаться на серверную технологию!Совершенно очевидно, что веб-сайт должен быть максимально кросс-браузерным.

-

Большое спасибо за любые предложения.

Answer 1

Это, вероятно, сработает, если вы правильно закроете:

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

Answer 2

Я думаю, вы должны использовать атрибут * в вашей функции выбора, чтобы выбрать все элементы, а затем применить к ним функцию $ .each! Читать это

Примерно так:

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

В этом случае код может быть неправильным, но идея та же! Или используйте функцию $ .find () для них, а после используйте функцию $ .each!

Ваш код просто выбирает первый элемент, а не все.

Надеюсь, это поможет!