如何禁用锚点（链接）标签并转换为span标签。

Question

我有一堆锚点 (<a>)，需要将它们转换成 <span> 标签。这不是为了禁用点击事件（我知道使用preventDefault()和从单击事件处理程序返回false来禁用点击事件）。我只需这样做就能启用拖放排序（IE中禁止在锚点上进行拖放，但允许在span上进行）。

我已经有一个可行的解决方案。

http://jsfiddle.net/5HGbx/

我只是想知道你们中是否有任何厉害的人有更简洁的方法来实现相同的结果。

- Peter Lyons

Answer 1

你可以使用jQuery API中的replaceWith函数。

$('#myButton').click(function(){
    $("#someDiv a").replaceWith(function(){
        return $("<span>" + $(this).html() + "</span>");
    });
});

这里提供演示地址：http://jsfiddle.net/naveen/ufYCt/1/

- naveen

---

我需要保留<a>标签的属性，以便稍后可以撤消此操作。它们不需要在DOM中成为实际的HTML，但是我不能完全丢失数据。因此，最终我使用jQuery的data()方法将它们存储起来，并得出了这个结果。http://jsfiddle.net/5HGbx/1/ - Peter Lyons

Answer 2

混合使用标准的DOM方法和jQuery有点奇怪且不必要。你可以像这样做：

function aToSpan() {
    var $link = $('a');
    var $span = $('<span>');
    $link.after($span.html($link.html())).remove();
}

这段代码的作用是将链接的内容复制到一个新的 <span> 中，然后用新的 <span> 替换原来的 <a>。

参考资料：

• after
• html
• remove

- mu is too short

Answer 3

从Naveen的回答中，您将失去href标签。

如果您也想要href标签，请按以下方式进行修改...

$('#myButton').click(function(){
    $("#someDiv a").replaceWith(function(){
        return $("<span href=\""+$(this).attr('href')+"\">" + $(this).html() + "</span>");
    });
});

- Kaisar

---

这会生成无效的标记。span没有href标签。 - naveen

"data-href" 将是更好的属性名称选择，这甚至符合HTML5标准。 - mu is too short