Как добавить предварительный тег внутри тега кода с помощью jQuery?

Я пытаюсь использовать jQueryдля форматирования блоков кода, в частности, чтобы добавить <pre>тег внутри <code>тега:

$(document).ready(function() {
   $("code").wrapInner("<pre></pre>");
});

Firefox правильно применяет форматирование, но IE помещает весь блок кода в одну строку. Если я добавлю предупреждение

alert($("code").html());

Я вижу, что IE вставил дополнительный текст в тег pre:

<PRE jQuery1218834632572="null">

Если я перезагрузлю страницу, число, следующее за jQuery, изменится.

Если я использую wrap()вместо wrapInner(), чтобы обернуть <pre>внешний <code>тег, IE и Firefox обрабатывают его правильно. Но не должно <pre>работать и внутри <code> ?

Я предпочел бы использовать, wrapInner()потому что затем я могу добавить класс CSS к <pre>тегу для обработки всего форматирования, но если я использую wrap(), я должен поместить форматирование страницы CSS в <pre>тег и форматирование текста / шрифта в <code>тег, или Firefox и IE оба задыхаются. Не большое дело, но я бы хотел сделать его максимально простым.

кто-нибудь еще сталкивался с этим? Я что-то упускаю?

15.08.2008 21:35:51
5 ОТВЕТОВ
РЕШЕНИЕ

В этом разница между блочными и встроенными элементами. preявляется элементом уровня блока . Недопустимо помещать его в codeтег, который может содержать только встроенный контент .

Поскольку браузеры должны поддерживать все, что им может понадобиться в реальной сети, Firefox пытается сделать то, что вы имеете в виду. IE, случается, обрабатывает это по-другому, что хорошо спецификацией; поведение в этом случае не определено, потому что это никогда не должно происходить.

  • Не могли бы вы вместо того, чтобы заменить на codeэлемент с pre? (Из-за блочной / встроенной проблемы, технически это должно работать, только если элементы находятся внутри элемента с «потоком» контента , но браузеры могут делать то, что вы хотите в любом случае.)
  • Почему это codeэлемент в первую очередь, если вы хотите, чтобы preповедение?
  • Вы также можете дать пробелу codeэлемент pre, сохраняющий мощность с помощью CSS white-space: pre, но, очевидно, IE 6 учитывает это только в строгом режиме .
12
16.08.2008 04:04:09
Использование тега code может быть оправдано как более семантическое, но не потому, что оно делает его правильным.
nickf 23.09.2008 06:40:06

Вы используете последнюю версию jQuery? Что делать, если вы попробуете

$("code").wrapInner(document.createElement("pre"));

Это лучше или вы получаете тот же результат?

1
15.08.2008 21:50:14

Кстати, я не знаю, связано ли это, но предварительные теги внутри кодовых тегов не будут проверяться в строгом режиме.

3
15.08.2008 21:56:18

Как отмечалось в markpasc, элемент PRE внутри элемента CODE не разрешен в HTML. Лучшее решение - изменить HTML-код, чтобы использовать <pre> <code> (что означает предварительно отформатированный блок, содержащий код) непосредственно в HTML-коде для блоков кода.

1
18.08.2008 12:13:36

Вы можете использовать html (), чтобы обернуть его:

$('code').each(function(i,e)
{
    var self = $(e);
    self.html('<pre>' + self.html() + '</pre>');
});

Как уже упоминалось выше, вам лучше поменять HTML. Но это решение должно работать.

1
18.08.2011 14:21:51