如何在不移除原有类的前提下修改产品元素的类名？

这里有个简洁可靠的实现方法，完全匹配你的需求：

步骤说明 #

• 先确保正确获取语言标识，同时处理URL路径无语言段的异常情况
• 精准定位所有需要修改类名的产品元素
• 遍历每个元素，替换第一个类名为带语言后缀的版本

完整代码示例 #

// 获取语言标识，为空时设置默认值（可根据需求调整默认语言）
var urlSegments = window.location.pathname.split('/');
var lang = urlSegments[1] || 'en';

// 选择目标容器下的所有直接产品子元素，避免误改其他元素
var productElements = document.querySelectorAll('#post-2036 > div');

// 遍历修改每个产品的第一个类名
productElements.forEach(function(el) {
  var classList = el.className.split(' ');
  if (classList.length > 0) {
    var firstClass = classList[0];
    // 额外校验确保是product开头的类名，提升代码鲁棒性
    if (firstClass.startsWith('product')) {
      classList[0] = `${firstClass}_${lang}`;
      el.className = classList.join(' ');
    }
  }
});

代码细节解释 #

• 语言标识容错：增加默认语言值，避免URL无语言段时出现product1_这类无效类名
• 精准元素选择：用#post-2036 > div仅选中目标容器的直接子元素，不会影响页面其他区域的元素
• 类名安全修改：拆分类名列表后只修改第一个元素，保留其他原有类名；加入startsWith('product')判断，防止意外修改非产品类元素

效果验证 #

以意大利语（it）页面为例，代码运行后，产品元素的第一个类名会自动变为product1_it、product2_it等，完全符合你给出的示例效果。

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