使用jQuery为动态生成的span添加title时选择器失效求助

我来帮你搞定这个问题～首先说下你代码里的直接bug：在遍历data2的那段代码里，类选择器多了个不必要的空格！你写的是$(".item-childoc_ " + ...)，这里item-childoc_后面的空格会让jQuery误以为你要找拥有item-childoc_类的元素下的子元素，而不是直接匹配类名为item-childoc_xxx的span，这就是选择器失效的核心原因。

修正后的基础版代码 #

把选择器里的空格去掉就能正常工作了：

$.each(data2, function(index, item){
  if (item["Kwadrant in CHILDoc"] == "CHILDoc") {
    // 先提取处理后的类名，让代码更清晰
    const cleanedClassName = item["Items in CHILDoc"].replace(/[^a-zA-Z0-9]/g,'');
    $(".item-childoc_" + cleanedClassName).attr("title", item["Items in CHILDoc"]);
  }
})

更高效的优化方案：一次遍历完成所有操作 #

其实你完全不需要分两次遍历data1和data2，可以把逻辑合并，在生成span的同时直接设置title——毕竟你要处理上百个对象，这样能避免两次DOM查询的性能开销，代码也更简洁。

假设data1和data2可以通过Items in CHILDoc字段关联，我们可以先把data2转成一个映射对象，然后在生成span时直接取对应的title：

// 先把data2转成键值对映射，方便快速查找
const chilDocTitleMap = {};
$.each(data2, function(index, item){
  if (item["Kwadrant in CHILDoc"] == "CHILDoc") {
    const key = item["Items in CHILDoc"].replace(/[^a-zA-Z0-9]/g,'');
    chilDocTitleMap[key] = item["Items in CHILDoc"];
  }
});

// 遍历data1生成span的同时直接设置title
$.each(data1, function (index, item) {
  if (item["Kwadrant in CHILDoc"] == "Centrale vak") {
    const cleanedKey = item["Items in CHILDoc"].replace(/[^a-zA-Z0-9]/g,'');
    // 如果找不到对应title就设为空，避免报错
    const titleText = chilDocTitleMap[cleanedKey] || '';
    const spanHtml = `<span class='item-childoc_${cleanedKey}' title='${titleText}'>${item["Items in CHILDoc"]}</span><br>`;
    $(".centrale-vak__key").append(spanHtml);
  }
})

这样一次遍历就完成了所有操作，既解决了选择器的问题，也提升了代码的性能和可维护性。

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