Question

我想在下面提到的代码中使用javascript或jquery替换带有span标记的标记。

<a class="multi-choice-btn" id="abcd123">
     <img class="x-panel-inline-icon feedback-icon " src="../images/choice_correct.png" id="pqrs123">
</a>

这应该改变如下。

<span class="multi-choice-btn" id="abcd123">
     <img class="x-panel-inline-icon feedback-icon " src="../images/choice_correct.png" id="pqrs123">
</span>

必须在班级＆＃34; multi-choice-btn＆＃34;的基础上进行更换。因为id是动态的。

请帮忙。

Answer 1

您可以执行以下操作：

$('a').contents().unwrap().wrap('<span></span>');

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

如果您想保留属性，可以执行以下操作：

// New type of the tag
var replacementTag = 'span';

// Replace all a tags with the type of replacementTag
$('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);
});

DEMO： http://jsfiddle.net/XzYdu/1/

Answer 2

不是最短但有效：

$('.multi-choice-btn').replaceWith(function() {
    return $('<span>', {
        id: this.id,
        `class`: this.className,
        html: $(this).html()
    })
});

请参阅http://jsfiddle.net/dfsq/unVfp/

Answer 3

var anchor = document.getElementById("abcd123"),
    span = document.createElement("span");

span.innerHTML = anchor.innerHTML;
span.className = anchor.className;
span.id = anchor.id;

anchor.parentNode.replaceChild(span,anchor);

http://jsfiddle.net/tCyVH/

Answer 4

请参阅附件jsFiddle。

var props = $(".multi-choice-btn").prop("attributes");

var span = $("<span>");

$.each(props, function() {
    span.attr(this.name, this.value);
});

$(".multi-choice-btn").children().unwrap().wrapAll(span);

Answer 5

尝试使用replaceWith和一个小的attrCopy逻辑。见下文，

DEMO： http://jsfiddle.net/4HWPC/

$('.multi-choice-btn').replaceWith(function() {

    var attrCopy = {};
    for (var i = 0, attrs = this.attributes, l = attrs.length; i < l; i++) {
        attrCopy[attrs.item(i).nodeName] = attrs.item(i).nodeValue;
    }       

    return $('<span>').attr(attrCopy).html($(this).html());

});

用span标签替换标签

5 个答案: