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

Question

目标:

使用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>

我想我需要使用"这个"和某种功能,但我担心我还在学习,并且不太懂得如何将解决方案拼凑在一起.

Answer 1

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

$('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/>');

虽然Felix Kling的解决方案速度大约是其两倍:

Answer 3

你总是会获得第一个code内容是正确的,因为$('code').html()无论你在哪里使用它都会始终引用第一个元素.

相反,您可以使用.each迭代所有元素并单独更改每个元素:

$('code').each(function() {
    $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );
    // this function is executed for all 'code' elements, and
    // 'this' refers to one element from the set of all 'code'
    // elements each time it is called.
});

Answer 4

试试这个:

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

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

});

http://jsfiddle.net/mTGhV/

Answer 5

这个怎么样？

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

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内的标记.innerHTMLcode

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');