如何基于子/兄弟元素的mySelector类用jQuery选中目标product-block元素

匹配规则梳理 #

需要精准选中两类符合条件的块元素，同时排除不符合的场景：

• 目标类型A：块的内部任意层级存在带mySelector类的input元素
• 目标类型C：块的紧随第一个兄弟节点就是带mySelector类的input元素
• 排除类型B：无上述两类特征的块元素

核心实现代码 #

利用jQuery内置的能力，分别匹配两类目标后合并去重即可，无需编写复杂的自定义过滤逻辑：

const matchedBlocks = jQuery.merge(
  // 匹配类型A：内部包含.mySelector元素的块
  jQuery('div:has(.mySelector)'),
  // 匹配类型C：紧邻.mySelector前面的兄弟块
  jQuery('.mySelector').prev('div')
).unique();

方案说明 #

• :has(.mySelector) 选择器会自动遍历DOM层级，选中所有内部嵌套mySelector元素的块，无论mySelector处于块的第几层子节点下都能正确匹配，完全覆盖类型A的场景，解决了之前使用jQuery('.mySelector').parent()只能获取直接父级、无法覆盖深层嵌套场景的局限
• .prev('div') 会获取每个mySelector元素紧邻的前一个兄弟div节点，不需要硬编码类名判断逻辑（例如之前代码中写死判断前一个元素是否有Z类的判断可以完全移除），只要是紧邻的div节点就会被匹配，完全覆盖类型C的场景
• .unique() 是jQuery内置的DOM去重方法，会自动移除合并结果中重复的节点，避免同一个块因为同时满足两类匹配规则被重复选中
  如果后续需要更精准的匹配范围（例如给所有产品块统一增加product-block类标识），只要把代码中的div替换为.product-block即可，无需调整核心逻辑。

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