使用jQuery收集各h2区块内的图标并插入到h2后适配移动端视图

问题原因 #

你的代码存在两个核心问题：

1. nextUntil('h2', '.icon img') 仅会匹配和h2同级的.icon下的img元素，如果你页面里的.icon是嵌套在其他容器内的，该方法无法命中目标。同时你需要移动的是整个<div class="icon">元素而非单独的img，选择器规则写得不对。
2. 没有做移动端视图的判断，会在所有设备上都执行元素移动逻辑，不符合你的需求。

正确实现代码 #

jQuery(document).ready(function() {
    // 移动端断点可根据你的页面响应式规则自行调整数值
    const mobileBreakpoint = 768;
    if (window.innerWidth < mobileBreakpoint) {
        jQuery('h2').each(function() {
            // 拿到当前h2到下一个h2之间的所有同级内容
            const currentSection = jQuery(this).nextUntil('h2');
            // 检索这段内容里所有的.icon容器
            const sectionIcons = currentSection.find('.icon');
            // 将图标插入到当前h2标题之后
            jQuery(this).after(sectionIcons);
        });
    }
});

补充说明 #

• 如果你需要保留原有位置的图标，仅复制一份放到h2后，把jQuery(this).after(sectionIcons);替换为jQuery(this).after(sectionIcons.clone());即可。
• 如果你的页面支持窗口大小动态调整，需要把这段逻辑绑定到resize事件上，同时做好防抖处理，避免窗口缩放时反复执行DOM操作。

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