jquery 将元素替换为具有自己文本的新元素

Question

我是 jquery 的新手，只是在尝试学习。我正在尝试将所有 < p> 元素更改为 < button> 元素，并使用与其对应的 p 元素相同的文本。

所以如果我有这个 html：

<p>Hello</p>
<p>Here is a paragraph</p>
<p>And Another</p>

我想把它改成这样：

<button>Hello</button>
<button>Here is a paragraph</button>
<button>And Another</button>

但是，我的 jquery 代码同时选择了所有 < p> 元素的文本，所以我得到了这个：

<button>Hello Here is a paragraph And Another</button>
<button>Hello Here is a paragraph And Another</button>
<button>Hello Here is a paragraph And Another</button>

我究竟做错了什么？这是我的 jquery/javascript：

var ChangeToButton = function () {
    $("p").replaceWith ("<button>" + $("this").text() + "</button>");
}

$("button").on("click", function (event) {
    ChangeToButton();
});

感谢您对此的任何帮助。

Answer 1

尝试使用 的接收器功能.replaceWith()，

$("p").replaceWith (function(_,content){ 
    return "<button>" + content + "</button>" 
});

演示