我试图使用类在多个div中追加HTML。但是我的代码在一个部分（HTML1）中复制HTML，而另一个部分是正确的。

HTML 1：

<div class="about-author">
  <div class="author-text">
    This is a author bio. <a href="https://example.com">example</a><a href="https://example.com">example</a>
  </div>
</div>

HTML 2格式：

<div class="author-info">
  <div class="author-bio">
    This is a author bio. <a href="https://example.com">example</a><a href="https://example.com">example</a>
  </div>
</div>

JavaScript程式码：

$(".about-author .author-text,.author-info .author-bio").each(function () {
    var $this = $(this),
        link = $this.find("a");
    link.each(function () {
        var $this = $(this),
            cls = $this.text().trim(),
            url = $this.attr("href");
        $this.replaceWith('<li class="' + cls + '"><a href="' + url + '" title="' + cls + '" rel="noopener noreferrer" target="_blank"/></li>')
    });
    if (link.length) {
        $this.parent().append('<ul class="author-links social social-color"></ul>');
    }
    $this.find("li").appendTo(".author-links")
});

我希望HTML 1和HTML 2中的输出相同