使用jQuery将一个标签替换为另一个标签

Question

目标：

使用jQuery，我试图替换所有出现的情况：

<code> ... </code>

与：

<pre> ... </pre>

我的解决方案：

我了解到以下内容：

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

我的解决方案的问题：

但是问题在于它用 第一个 “ code”标签之间的内容替换了（第二，第三，第四等）“ code”标签之间的所有内容。

例如

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

变成

<pre> A </pre>
<pre> A </pre>
<pre> A </pre>

我认为我需要使用“ this”和某种功能，但恐怕我还在学习，并且不太了解如何将解决方案组合在一起。

Answer 1

您可以将一个函数传递给.replaceWith [docs]：

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

在函数内部，this引用当前处理的code元素。

更新： 并没有很大的性能差异，但是如果code元素具有其他HTML子元素，则添加子元素而不是对其进行序列化会更正确：

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