制造商目录页面动态Div ID特殊字符处理需求及代码异常排查

你的问题根源在于没有逐个遍历处理每个制造商的容器元素——当你直接对jQuery('.card-header').closest(".w-100")这个元素集合调用attr()时，获取ID只会返回第一个元素的值，设置ID时也会把这个值批量应用到所有匹配的元素上，自然就出现了所有ID都变成第一个制造商ID的情况。

正确的解决方案：遍历每个元素单独处理 #

我们需要用.each()方法遍历每个目标容器，对每个元素单独执行ID的修改逻辑，代码如下：

// 遍历每个制造商的容器元素
jQuery('.card-header').closest(".w-100").each(function() {
    // 获取当前元素的原始ID
    var originalId = jQuery(this).attr("id");
    if (!originalId) return; // 跳过没有ID的元素，避免错误
    
    // 处理ID：空格替换为短横线，移除撇号
    var newId = originalId
        .replace(/ /g, '-') // 替换所有空格为短横线
        .replace(/'/g, ''); // 移除所有撇号
    
    // 为当前元素设置新ID
    jQuery(this).attr("id", newId);
});

代码解释 #

1. .each()遍历：确保每个制造商容器都被单独处理，而不是批量操作整个集合。
2. jQuery(this)：在遍历函数内部，this指向当前正在处理的DOM元素，用它来获取和设置ID，保证每个元素的独立性。
3. ID处理逻辑：先替换空格为短横线，再移除撇号，你也可以根据需求扩展其他字符的处理规则（比如处理连字符、下划线等）。
4. 空ID判断：加了if (!originalId) return;的判断，避免没有ID的元素导致后续代码出错。

测试建议 #

你可以在遍历函数里加一行console.log('原始ID:', originalId, '新ID:', newId);，打开浏览器控制台查看每个元素的ID处理结果，确认是否符合预期。

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