替换网页中的所有 span 标签

Question

我有一个问题，因为我想将页面中的所有跨度替换为标记 b。

这是演示，但很糟糕。要更改所有跨度，我必须在按钮上单击 2 次​​p>

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

<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 2

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

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

DEMO

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 之前，如果第一个节点在该集合未连接到文档，在这些情况下 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 方法以树形顺序返回一个实时 元素集合。因此，如果您从索引 0 开始，您将（在简单示例中）首先处理外部 span 元素，当您到达内部元素时，集合已缩小，因此它只有一个成员，位于索引 0，并且内部的span 因此不会被处理。

这段代码没有复制span元素的任何属性；如果有要保留的属性，添加复制它们的代码。

附：我怀疑真正的问题与提出的问题本质上不同，因为将所有 span 元素更改为 b 元素仅在相当特殊的情况下才有意义，并且问题中的按钮文本“将我的链接更改为跨度”确实与描述或代码片段完全不匹配。