如何使用jQuery选择符合field-*-preview类名格式的多类元素

问题根源 #

你原本使用的[class$=-preview]选择器规则是匹配整个class属性字符串的结尾，如果field-*-preview类名后还跟着其他类名，整个class属性的后缀就不是-preview，所以会匹配失败。

最优解决方案（推荐） #

使用jQuery的filter()方法遍历元素类名，通过正则匹配符合规则的类，不受类名顺序、多类名场景影响，准确度最高：

var sel = $('div').filter(function() {
  // 检查当前元素是否存在符合 field-*-preview 规则的类名
  return Array.from(this.classList).some(className => /^field-.*-preview$/.test(className))
}).length
console.log(sel) // 输出结果为4，覆盖所有符合要求的元素

备选方案（纯属性选择器实现） #

如果不想用filter，也可以通过组合属性选择器覆盖所有类名位置场景，不过写法较为冗长，稳定性略低于正则方案：

var sel = $(`
  [class^="field-"][class$="-preview"],
  [class^="field-"][class*="-preview "],
  [class*=" field-"][class$="-preview"],
  [class*=" field-"][class*="-preview "]
`).length

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