如何使用jQuery选取所有带指定前缀部分类名的DOM元素实例

问题原因 #

你使用的[class^='appended']属性选择器的匹配规则是整个class属性的字符串以appended开头，但你的HTML结构中class属性先写了product-sample-field类，所以整个属性字符串的开头是product，自然无法匹配到目标元素。

正确实现方案 #

方案1：属性选择器组合写法

通过两个属性选择器覆盖所有可能的类排序场景，性能最优：

newContent = $(".product-sample-field[class^='appended'], .product-sample-field[class*=' appended']");

• [class^='appended']匹配class属性开头就是appended的元素
• [class*=' appended']匹配class属性中存在空格后接appended开头的类的元素，兼容你现在product-sample-field在前的类排序

方案2：filter正则匹配（更鲁棒）

如果担心后续类名顺序调整、或者出现包含appended但不是前缀的类名，用正则匹配的方式更稳妥：

newContent = $(".product-sample-field").filter(function() {
  // 匹配类名列表中存在以appended开头的类
  return /(^|\s)appended/.test(this.className);
});

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