使用类批量追加HTML出现重复问题，求统一输出解决方案

数据老陈

2026-8-11

问题分析与修复方案

问题根源

你的代码中最后一步$this.find("li").appendTo(".author-links")使用了全局类选择器，会将当前容器内的<li>元素追加到所有带有.author-links类的列表中。当处理第二个容器（HTML2）时，页面上已经存在第一个容器创建的.author-links列表，导致第二个容器的<li>被同时插入到两个列表里，最终HTML1区域出现重复内容。

修复后的代码

$(".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"></a></li>')
    });
    if (link.length) {
        // 创建当前容器专属的ul并保存引用
        var $authorLinks = $('<ul class="author-links social social-color"></ul>');
        $this.parent().append($authorLinks);
        // 将li追加到当前容器对应的专属列表中
        $this.find("li").appendTo($authorLinks);
    }
});