求助：如何在不含指定类的div前用.before()插入div？

首先，我们可以结合jQuery的:not()和:has()选择器来精准定位符合条件的父div，然后执行.before()插入操作。以下是可行的代码示例：

// 定位所有内部不包含.specific-class的.target-div元素
$('.target-div:not(:has(.specific-class))').before('<div class="inserted-div">我是插入的新div</div>');

分步解释： #

• .target-div：替换成你实际要检查的目标父div的类名或ID。
• :not(:has(.specific-class))：这是关键的条件筛选逻辑：
  • :has(.specific-class) 会选中所有包含.specific-class子元素的父元素；
  • 外层的:not()反向筛选，只保留不包含该子元素的父div。
• .before()：向选中的目标div的前方插入指定的新div元素。

常见问题排查： #

如果之前的代码没生效，大概率是这几个原因：

• 选择器拼写错误：确认目标div、特定子元素的类名/ID没有大小写或字符错误。
• 代码执行时机不对：确保代码在DOM完全加载后运行，比如包裹在$(document).ready()中：

  $(document).ready(function() {
    $('.target-div:not(:has(.specific-class))').before('<div class="inserted-div">我是插入的新div</div>');
  });
  

• 动态生成元素：如果目标div是后续通过JS动态添加的，需要在元素生成完成后再执行这段插入代码。

替代写法：使用.filter()手动筛选 #

要是觉得选择器组合不够直观，也可以用.filter()方法明确逻辑：

$('.target-div').filter(function() {
  // 检查当前div内部是否没有.specific-class元素
  return !$(this).find('.specific-class').length;
}).before('<div class="inserted-div">我是插入的新div</div>');

这种写法逻辑更清晰，适合需要额外复杂判断的场景。

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