jQuery按条件向A1_B1类元素后插入HTML问题求解

原有代码错误点 #

• 选择器语法不符合jQuery规范，类名缺少.前缀，伪类:not()的拼接逻辑错误
• 直接获取父元素完整class属性拼接选择器的逻辑错误，父元素存在多个类时会生成错误的后代选择器，无法正确匹配当前点击的父元素
• 没有正确实现「判断A1_B1元素下一个相邻元素是否带class1」的筛选逻辑

正确实现代码 #

$(document).on("click", ".connect", function (ev) {
    // 精准获取当前点击链接所属的A1_B1父元素
    const $currentParent = $(this).closest('div.A1_B1.symptom');
    const insertHtml = "<div class='class2'>Bar Bar Bar</div>";
    // 筛选符合要求的A1_B1元素并插入内容
    $('div.A1_B1.symptom').not($currentParent).filter(function() {
        // 排除下一个相邻元素带class1的情况
        return !$(this).next().hasClass('class1');
    }).after(insertHtml);
});

逻辑说明 #

1. 用closest方法精准匹配当前点击链接所属的A1_B1父元素，避免多层父级匹配错误
2. 先选中所有A1_B1类的div，用not()方法排除当前点击的父元素，满足「不插入到被点击元素后方」的限制
3. 用filter()方法遍历剩余元素，判断每个元素的下一个相邻元素是否携带class1，排除不符合的元素，满足第二个限制条件
4. 直接用after()方法将待插入HTML追加到符合条件的元素后方，逻辑清晰易维护

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