使用jQuery将标题元素转换为链接的最佳方式

Question

我想在不使用插件的情况下，将WordPress帖子中的所有标题自动转换为链接。

Wordpress帖子的HTML结构基本上是这样的：

<article>
<p>Text</p>
<h2>Headline</h2>
<p>More text</p>
<h3>Another headline</h3>
<p>Some more text</p>
</article>

现在我有以下jQuery来查找h2和h3的所有实例，并将它们转换为链接：

$('article h2').each(function(){
$(this).replaceWith( "<a href='#' class='something'><h2>" + $(this).html() + "</h2></a>" );
});
$('article h3').each(function(){
$(this).replaceWith( "<a href='#' class='something'><h3>" + $(this).html() + "</h3></a>" );
});

它运行得非常好，但必须有一种更优雅、更具表演性的方式。

实际上，我不知道如何在jQuery中进行编码，而是使用我在其他答案中找到的代码来组合上面的代码。您可以在jsFiddle上测试上面的代码。

Answer 1

您可以进行两个调整来改进逻辑。

首先，使用:header将所有标头包含在单个选择器中。其次，您可以使用wrap()将现有内容放置在a元素中。试试这个：

$('article :header').wrap('<a href="#" class="something"></a>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article>
<p>Text</p>
<h2>Headline</h2>
<p>More text</p>
<h3>Another headline</h3>
<p>Some more text</p>
</article>