javascript - 大量更换元件

Question

我正在尝试将某个元素中的所有子元素替换为 DIV。

我有以下结构:

<div id="wrapper">
    <span>
        <span>
            <span>
                <span></span>
                <span></span>
            </span>
        </span>
    </span>
</div>

我已经尝试过replaceElements($('#wrapper')) :

function replaceElements($element){
    var children = $element.find("*");
    var current;
    for(var i=0; i<children.length; i++){
        current = $(children[i]);
        current.replaceWith("<div>" + current.html() + "</div>");
    }
}

但是这不起作用，因为当它尝试更改第 N+1 个元素时，所有准备就绪的元素都不存在，因为它在执行第 N 个元素时被替换了。 N+1 是 N 的后代，因此在更改 .html() 时也会被更改。 N 个。保留元素属性在这里不是问题。

请问如何将所有子 SPAN 更改为 DIV？

Answer 1

您不应该在替换的元素中使用 html 内容，而是需要向其中添加 dom 元素

function replaceElements($element) {

  $element.find("*").replaceWith(function() {
    return $('<div></div>', {
      html: this.childNodes
    });
  })
}

replaceElements($('#wrapper'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
  <span>1
    <span>2
      <span>3
        <span>4</span>
        <span>5</span>
      </span>
    </span>
  </span>
</div>

注意:不会复制元素的任何属性