使用jQuery选择class名称带指定前缀的多个元素的实现问题

错误原因 #

$(".^us_")属于非法的jQuery选择器语法，jQuery本身没有提供类名前缀匹配的简写语法，所以运行会直接抛出语法错误。

正确实现代码 #

方案1：属性前缀选择器（仅适用于class属性值首类为us_开头的场景） #

如果你的元素class属性的第一个类就是us_开头的，直接使用CSS原生的属性前缀选择器即可：

$('[class^="us_"]')

注意：如果元素存在多个类名，且us_开头的类不是第一个，比如<div class="test us_me">，该选择器会匹配失败。

方案2：filter过滤法（全场景兼容） #

不管us_开头的类在class属性的哪个位置，都能正确匹配，是最稳妥的实现方式：

$('*').filter(function() {
  // 遍历当前元素的所有类名，判断是否有以us_开头的
  return Array.from(this.classList).some(cls => cls.startsWith('us_'))
})

如果需要兼容不支持ES6语法的旧浏览器，可以改成以下写法：

$('*').filter(function() {
  var classList = $(this).attr('class').split(' ');
  for(var i = 0; i < classList.length; i++) {
    if(classList[i].indexOf('us_') === 0) return true;
  }
  return false;
})

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