jQuery each方法执行时.list类div被重复包裹两层问题求解

问题原因 #

你写的代码在遍历每个.parent元素时，都是全局查找页面所有.list元素：页面存在2个.parent的情况下，wrap方法会被执行2次，所以每个.list都会被包裹2层.wrap。

解决方案 #

方案1：限定查找范围（适配需要单独处理每个.parent逻辑的场景） #

在each循环内，只查找当前遍历到的.parent下的.list元素即可，修改后代码如下：

jQuery(".parent").each(function () {
  // 限定查找范围为当前遍历到的.parent容器内
  jQuery(this).find(".list").wrap("<div class='wrap'></div>");
});

你也可以写成jQuery(".list", this).wrap("<div class='wrap'></div>")，两种写法效果完全一致。

方案2：直接批量处理（无需额外处理.parent逻辑时更简洁） #

你的需求只是给所有.list外层包一层.wrap，完全不需要遍历.parent，直接写一行代码就可以实现：

jQuery(".list").wrap("<div class='wrap'></div>");

两种方案都可以实现每个.list外层仅包裹一层.wrap的需求，你可以根据自己的实际业务场景选择。

内容的提问来源于stack exchange，提问作者Cosimo wiSe