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

2022-08-30 05:27:51

目标:

使用jQuery,我试图替换所有出现的:

<code> ... </code>

跟:

<pre> ... </pre>

我的解决方案:

我得到了以下几点,

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

我的解决方案的问题:

但问题是,它将(第二,第三,第四等)“代码”标记之间的所有内容替换为第一个“代码”标记之间的内容。

例如:

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

成为

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

我认为我需要使用“this”和某种功能,但我担心我还在学习,并不真正了解如何将解决方案拼凑在一起。


答案 1

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

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

在函数内部,引用当前处理的元素。thiscode

演示

更新:没有太大的性能差异,但是如果元素有其他HTML子级,则附加子级而不是序列化它们感觉更正确:code

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

答案 2

这要好得多:

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

虽然不可否认,Felix Kling的解决方案大约是其两倍: