Question

可能重复：
Change the tag name but keep all the attributes

是否可以用<a>标记替换<span>标记并保留其所有属性？

我有这个HTML，当有人点击编辑时，我想将所有编辑链接转换为span的

<a href="javascript:void(0);" class="edit" data-id="123">Edit</a>

用户完成编辑后（通过按保存或取消），然后我想将所有范围标记转换回链接。

$(".edit").live("click", function(){
    $(".edit").addClass("inactive-link");
});

Answer 1

正如FAngel所指出的，在这种情况下，样式更改要简单得多。在我的示例中，我将继续使用事件委派而不是.live，因为.live将在以后的jQuery版本中删除：

$(document).on('click', '.edit', function (e) {
   //add inactive class to *this* link
   $(this).addClass('inactive-link');

   //stop default link behavior, i.e. opening a new page
   e.preventDefault();
});

Answer 2

$(".edit").live("click", function(e){
    if(!$(e.target).hasClass("inactive-link")) { //suppose $(this) will work instead of $(e.target), but do not remember for sure
         $(".edit").addClass("inactive-link");// after this is done - this function will not execute anymore for .edit elements because of previouse if statement
         //code to start editing
    }
});

只需检查点击的元素是否具有类inactive-link。编辑完成后删除它。

基本上，链接没有“禁用”功能。但是你可以在编辑模式下取消绑定事件处理程序，或者检查链接是否有某个类，就像我上面的代码一样。

另外，请注意不推荐使用live，最好使用.on（如果你有一些最新的jQuery，v1.7及更高版本）。 Here您可以找到如何将live替换为on

Answer 3

这将满足您的需求：

function switchTag(e, toTag) {
    var outerHTML = e.outerHTML;
    outerHTML = outerHTML.replace(/^<([a-z])(.*?)>(.*)<\/\1>$/ig, "<" + toTag + "$2>$3</" + toTag + ">");
    e.outerHTML = outerHTML;
};

使用示例：

$(".edit").click(function() {
    switchTag(this, "span");
});

Demo available;）

Answer 4

// Replacement Tag
var replacementTag = 'span';

$('a').each(function() {
    var outer = this.outerHTML;

    // Replace opening tag
    var regex = new RegExp('<' + this.tagName, 'i');
    var newTag = outer.replace(regex, '<' + replacementTag);

    // Replace closing tag
    regex = new RegExp('</' + this.tagName, 'i');
    newTag = newTag.replace(regex, '</' + replacementTag);

    $(this).replaceWith(newTag);
});

链接http://jsfiddle.net/tTAJM/19/

Answer 5

我会使用两个容器：links和edit-links

当按下编辑按钮时，我会使用转换为edit-links的容器链接中的所有<a>标记填充div <span>

按下保存按钮后，我会重新创建<a>容器中的所有links标记。

$('#myButtonEdit').click(function(){        
    $('#links').hide();
    $('#edit-links').empty();

    //loop on all <a> tags to create <span> in edit-links div
    $('a').each(function(){
        $('#edit-links').append('<span id="'+this.id+'" class="'+$(this).attr('class')+'">'+$(this).attr('href')+'</span>');
    });
});

$('#myButtonSave').click(function(){

    $('#edit-links').hide();
    $('#links').empty();

    //loop on all <span> tags to create <a> in links container
    $('#edit-links span').each(function(){
        $('#links').append('<a id="'+this.id+'" class="'+$(this).attr('class')+'" href="'+$(this).html()+'">'+$(this).html()+'</span>');
    });
});

Answer 6

除此之外我不喜欢您想要解决问题的方式，这里有一个可能的解决方案：

function replaceElement(el, tagName) {
  var attrs = {
    text: el.innerHTML
  };
  $.each(el.attributes, function() {
    attrs[this.nodeName] = this.nodeValue;
  });
  $(el).replaceWith($("<" + tagName + " />", attrs));
}

$("a.edit").on("click", function() {
  replaceElement(this, "span");
});

DEMO： http://jsfiddle.net/rxzdK/

这里新元素将包含被替换元素的所有属性。但是，根据标准，您应该考虑<span>不应具有src属性。

替换标记并保留属性

6 个答案: