Использование jQuery для замены одного тега другим

Question

Цель:

Используя jQuery, я пытаюсь заменить все вхождения:

<code> ... </code>

с:

<code><pre> ... 

Мое решение:

Я дошел до следующего,

<code>$('code').replaceWith( "<pre>" + $('code').html() + "

");

Проблема с моим решением:

но проблема в том, что он заменяет все между (вторым, третьим, четвертым и т. Д.) Тегами «code» на содержимое между тегами first «code».

например.

<code> A </code>
<code> B </code>
<code> C </code>

становится

<code><pre> A 

 A 

 A 

Я думаю, что мне нужно использовать "это" и какую-то функцию, но я боюсь, что все еще учусь и не понимаю, как собрать решение вместе.

Answer 1

Вы можете передать функцию на .replaceWith ^{[документы]} :

$('code').replaceWith(function(){
    return $("<pre />", {html: $(this).html()});
});

Внутри функции this относится к текущему обработанному элементу code.

DEMO

Обновление: Нет большой разницы в производительности , но в случае, если у элементов code есть другие дочерние элементы HTML, добавление дочерних элементов вместо их сериализации кажется более корректным:

$('code').replaceWith(function(){
    return $("<pre />").append($(this).contents());
});

Answer 2

Это намного приятнее:

$('code').contents().unwrap().wrap('<pre/>');

Хотя по общему признанию Решение Феликса Клинга примерно в 100 раз * в два раза быстрее :

Answer 3

Правильно, что вы всегда получите первое code содержимое, потому что $('code').html() всегда будет ссылаться на первый элемент, где бы вы его не использовали.

Вместо этого вы можете использовать .each для итерации по всем элементам и изменения каждого из них по отдельности:

<code>$('code').each(function() {
    $(this).replaceWith( "<pre>" + $(this).html() + "

"); // эта функция выполняется для всех элементов code, а // this ссылается на один элементиз набора всех элементов 'code' // каждый раз, когда он вызывается.});

Answer 4

Попробуйте это:

<code>$('code').each(function(){

    $(this).replaceWith( "<pre>" + $(this).html() + "

"); });

http://jsfiddle.net/mTGhV/

Answer 5

Как насчет этого?

<code>$('code').each(function () {
    $(this).replaceWith( "<pre>" + $(this).html() + "

"); });

Answer 6

Построение на основе ответа Феликса.

$('code').replaceWith(function() {
    var replacement = $('<pre>').html($(this).html());
    for (var i = 0; i < this.attributes.length; i++) {
        replacement.attr(this.attributes[i].name, this.attributes[i].value);
    }
    return replacement;
});

Это воспроизведет атрибуты тегов code в тегах замены pre.

Редактировать: Это заменит даже теcode теги, которые находятся внутри innerHTML других code тегов.

function replace(thisWith, that) {
    $(thisWith).replaceWith(function() {
        var replacement = $('<' + that + '>').html($(this).html());
        for (var i = 0; i < this.attributes.length; i++) {
            replacement.attr(this.attributes[i].name, this.attributes[i].value);
        }
        return replacement;
    });
    if ($(thisWith).length>0) {
        replace(thisWith, that);
    }
}

replace('code','pre');

Answer 7

Начиная с jQuery 1.4.2:

$('code').replaceWith(function(i,html) {
  return $('<pre />').html(html);
});​

Затем вы можете выбрать новые элементы:

$('pre').css('color','red');

Источник: http://api.jquery.com/replaceWith/#comment-45493689

jsFiddle: http://jsfiddle.net/k2swf/16/

Answer 8

Еще один короткий и простой способ:

$('code').wrapInner('<pre />').contents();

Answer 9

Если бы вы использовали ванильный JavaScript, вы бы:

• Создали новый элемент
• Переместите дочерние элементы старого элемента в новый элемент
• Вставьте новыйэлемент перед старым
• Удалить старый элемент

Вот jQuery-эквивалент этого процесса:

<code>$("code").each(function () {
    $("<pre>

"). append (this.childNodes) .insertBefore (this); $ (this) .remove ();});

Вот URL-адрес jsperf:
http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

PS: все решения, использующие .html() или .innerHTML являются разрушительными .

Answer 10

Все приведенные здесь ответы предполагают (как показывает пример вопроса), что в теге нет атрибутов. Если принят ответ на этот вопрос:

<code class='cls'>A</code>

если будет заменено на

<code><pre>A

Что если вы хотите сохранить атрибуты - что означает замена тега ...? Это решение:

$("code").each( function(){
    var content = $( "<pre>" );

    $.each( this.attributes, function(){ 
         content.attr( this.name, this.value );
    } );

    $( this ).replaceWith( content );
} );