替换网页中的所有span标签

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>");
});});

工作演示

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方法以树顺序返回元素的实时集合。 因此，如果从索引0开始，则将（在简单示例中）首先处理外部span元素，当到达内部span元素时，该集合将缩小，以使其只有一个成员（索引为0），而内部span因此不会被处理。

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

PS我怀疑真正的问题与提出的问题本质上是不同的，因为将所有span元素更改为b元素仅在相当特殊的情况下才有意义，并且问题中的按钮文本“ Change my link to a span”与问题中的按钮文本不匹配。描述或代码片段。