Question

将<a>转换为<span>以保留所有属性和内容的最简单方法是什么？（除了href之外）。

.replaceWith()取代整个shebang。

Answer 1

您可以使用attributes属性迭代元素的属性。您可以使用attribute.cloneNode(true)复制属性。您可以使用element.attributes.setNamedItem(attribute)将该克隆属性添加到另一个元素的属性集合中。

这是一个快速插件：

$.fn.cloneTo = function (target) {
    // copies the attributes, html, and event handlers of the first element to each of
    // the elements in the provided jQuery object or that match the provided selector
    if (!target || !target.jquery) {
        target = $(target);
    }
    if (this.length) {
        $.each(this[0].attributes, function(i, attr) {
            target.each(function(){
                this.attributes.setNamedItem(attr.cloneNode(true));
            });
        });
        $.each(this.data("events"), function(evt, handlers){
            $.each(handlers, function(i, handler){
                target.bind(evt, handler);
            });
        });
        target.empty().append(this.contents());
    }
    return this;
};

像这样使用：

var span = $("<span>");
$("#myLink").cloneTo(span).replaceWith(span);

工作演示：http://jsfiddle.net/gLqZJ/2

编辑：上面已更新，以复制事件处理程序并保持后代节点不变，而不是复制HTML。

Answer 2

怎么样

$element.html(function(html) {
   return html.replace(/<(\/?)a/gi, "<$1span"); // string manipulation might be faster, but you get the concept
});

这将保存属性和内容，但不保存任何数据和事件处理程序。如果你需要后代的那些，你应该删除子节点并将它们附加到新的跨度。

编辑：对不起，我对jQuery并不熟悉。 .html()方法更改innerHTML，不包括节点本身。该功能应该是这样的：

$element(s).each(function() {
   var l = this.tagName.length + 1;
   this.outerHTML = "<span"+this.outerHTML.slice(l, -l)+"span>";
});

Answer 3

结合jQuery的replaceWith()和html()并迭代复制属性。鉴于您的锚标记的标识为#anchor：

$('#anchor').replaceWith(function() {
    var span = $('<span/>');
    $.each(this.attributes, function(){
        span.attr(this.name, this.value);
    });
    return span.html($(this).html());            
});

有关示例，请参阅更新的jsFiddle。

把锚变成跨度？

3 个答案: