jQuery用each方法遍历dom的问题（周末加班解决，在线等~)

Question

先上示例代码：
html：

<!-- 去除div标签 -->
<section id="test">
    <div class="1">
        <div class="2">
            <img src="http://h.hiphotos.baidu.com/baike/s%3D220/sign=a2c005689058d109c0e3aeb0e159ccd0/a5c27d1ed21b0ef46441fe48dfc451da81cb3e7e.jpg">
        </div>
    </div>
</section>

js：

$('#test').find('div').each(function(i, e) {
    var _this = $(e);
    _this.after(_this.html());
    _this.remove();
});

执行之后html：

<section id="test">
    <div class="2">
        <img src="http://h.hiphotos.baidu.com/baike/s%3D220/sign=a2c005689058d109c0e3aeb0e159ccd0/a5c27d1ed21b0ef46441fe48dfc451da81cb3e7e.jpg">
    </div>
</section>

问题描述：div.2为什么没有被去除，新插入的标签没有加入到遍历集合里面吗？但是打断点调试的时候看到已经选取到了div.2。如何才能去除嵌套的div标签？

Answer 1

https://jsfiddle.net/g7co82nw/

$("#test").find("div").children(":not(div)").appendTo($("#test"));
$("#test").children("div").remove();

这个方法简单，但是可能会造成嵌套关系不正常(比如某个非 div 套了个 div 又套了个非 div 的情况)

可以用一个循环来解决，直到所有 div 都没了

https://jsfiddle.net/g7co82nw/1/

  let divs = $("#test").find("div");
  while (divs.length) {
      divs.children(":not(div)").unwrap();
    divs = $("#test").find("div");
  }

如果只想移除 #test 的直接子 div，就不用 find() 用 children() 就好

Answer 2

jQuery获取的元素不是动态的，所以新插入的不在里面，你可以试试append插入试试

Answer 3

不用遍历

$('#test').find('img').unwrap().unwrap();

或者

$('#test').html($('#test img'));

Answer 4

想到了一个方法：遍历完后再重新查找div再进行遍历：

(function() {
    var tag = $('#test').find('div');
    tag.each(function(i, e) {
        var _this = $(e);
        _this.replaceWith(_this.html());
    });
    tag.length ? arguments.callee() : false;
})();

Answer 5

思路：先找到最里边那个需要“解套”的节点，用变量缓存.detach()预删除（看上去跟.remove()差不多，但是这个方法的神奇之处在于它可以缓存），然后到根节点下.remove()掉所有子节点，最后把刚才缓存的节点挂在根节点上。

代码：

function test() {
    var i = $('#test').filter(':empty').detach(); //修改了下，最里边的应该是个空节点，应该能抓到
    $('#test').children().remove();
    i.appendTo('#test');
}
test();

Answer 6

把你的循环语句执行两边就可以实现了.
因为在执行$(."div1")的时候已经把$(."div2")的元素给清除了,且生成了另一个$(."div2"),但是元素的引用还在循环的数组里面,所以打断点的时候可以看到$(."div2")