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的后代，因此在更改N的.html()时会被更改。保留元素属性不是问题。

如何将所有子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>

注意：不会复制元素的属性

批量替换元素

1 个答案: