Question

我遇到了问题，因为我想要将页面中的所有跨度替换为标记b。

这是演示，但很糟糕。要更改所有范围，我必须在按钮上单击2次

Jquery的：

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

HTML：

    <span>fdfdfd <span>hytrytryrt</span> fdfdfdf</span>

<button id="myButton">Change my link to a span</button>

这是链接：

http://jsfiddle.net/kXfX9/

Answer 1

我刚想到了！，尝试reverse元素集合，然后调用.replaceWith()

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

DEMO

Answer 2

<span>fdfdfd <span>hytrytryrt</span> fdfdfdf</span>

<button id="myButton">Change my link to a span</button>

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

演示：

http://jsfiddle.net/Tm4Qv/1/

Answer 3

首先，您的标记无效。它应该是：

 <span>fdfdfd</span> <span>hytrytryrt</span> <span>fdfdfdf</span>

并用b：

更改范围

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

<强> Working Demo

Answer 4

像这样更改你的HTML

 $('#myButton').on('click',function(){
        $("span").replaceWith(function(){
            return $("<b>" + $(this).text() + "</b>");
        });
    });

注意

先前 jQuery 1.9 ， .replaceWith（）会尝试添加或更改当前jQuery集中的节点，如果第一个节点在该集合未连接到文档，在这些情况下return a new jQuery set而不是original set.该方法可能会或可能不会返回新结果，具体取决于其参数的数量或连接性！

从 jQuery 1.9 开始，.replaceWith()始终为return the original unmodified set。尝试在没有父项的节点上使用这些方法没有effect—that，既不会更改集合也不会更改它包含的节点。

Answer 5

这可能最好用纯JavaScript完成，没有jQuery。您只需获取所有span元素，然后在DOM中将每个元素替换为您创建的b元素，并将span的内容分配给它。

<button id="myButton" onclick="chg()">Change span to b</button> 
<script>
function chg() {
  var spans = document.getElementsByTagName('span');
  for(var i = spans.length - 1; i >= 0; i--) {
    var b = document.createElement('b');
    b.innerHTML = spans[i].innerHTML;
    spans[i].parentNode.replaceChild(b, spans[i]);
  }
}
</script>

for循环“向后”运行，因为getElementsByTagName方法按树顺序返回 live 元素集合。因此，如果您从索引0开始，您将（在简单示例中）首先处理外部span元素，当您到达内部元素时，集合已缩小，因此它只有一个成员，在索引处0，因此内部span将不会被处理。

此代码不会复制span元素的任何属性;如果有要保留的属性，请添加用于复制它们的代码。

P.S。我怀疑真正的问题与提出的问题本质上是不同的，因为将所有span元素更改为b元素仅在相当特殊的情况下才有意义，并且按钮文本“将我的链接更改为范围”在问题中根本不符合描述或代码片段。

替换网页中的所有span标记

5 个答案:

DEMO