Question

我正在尝试制作一个简单的jQuery插件来替换元素的标签。这是来源：

$.fn.replaceTag = function(tag, copyAttributes = true) {
  return this.each(function() {
    const newTag = tag || this.dataset.tag;

    if (!newTag.length) {
        return true;
    }

    const replacement = document.createElement(tag);

    if (copyAttributes) {
        for (let attr of this.attributes) {
            replacement.setAttribute(attr.nodeName, attr.nodeValue);
        }
    }

    replacement.innerHTML = this.innerHTML;

    this.replaceWith(replacement);
  });
};

以下是其实施的一个示例：

const $xyz = $('.xyz');
setTimeout(() => $xyz.replaceTag('h1'), 2000);
setTimeout(() => $xyz.replaceTag(), 3000); /// Switch to tag defined by data-tag attribute
setTimeout(() => $xyz.replaceTag('h6', false), 5000); /// Drop attributes

以下是演示：https://jsfiddle.net/jasongardner/cpy6e51h/

这就是问题所在：

假设我们的元素是<p class="xyz" data-tag="b">Hi!</p>。我希望此示例将初始<p>标记更改为<h1>，然后更改为<b>，最后更改为<h6>（不包含任何HTML属性）。

但事实并非如此。标签在第一次更换，但在后续调用中不会再次更换。

我缺少什么？！

你能推荐这样的插件吗？

谢谢！

Answer 1

这是因为$ xyz在第一次替换后引用了一个不存在的对象 - 来自文档（http://api.jquery.com/replacewith/）：

与大多数jQuery方法一样，.replaceWith（）方法返回jQuery对象，以便可以将其他方法链接到它上面。但是，必须注意返回原始jQuery对象。此对象引用已从DOM中删除的元素，而不是已替换它的新元素。

如果您在每次通话之前重新初始化$ xyz，则可以正常工作

jQuery替换HTML标签插件

1 个答案: