jQuery动态加载内容时，为Span设背景色的.each函数失效求助

这个问题我太熟啦！其实核心原因很简单：你一开始写的代码是在页面初始加载时就遍历了所有已存在的<span>元素，但动态加载的元素是在这之后才被添加到DOM里的，自然没被原来的代码处理到。给你几个实用的解决思路：

方案一：动态加载完成后重新调用处理函数 #

把设置背景色的逻辑封装成独立函数，不管是初始加载还是动态加载完成后，都能调用它处理元素。这是最直观也最容易维护的方案：

// 封装处理逻辑
function setSpanBackground() {
  $('span').each(function() {
    var color = $(this).data('c');
    $(this).css('background', color);
  });
}

// 页面初始加载时执行
$(document).ready(function() {
  setSpanBackground();
});

// 假设你用jQuery的load方法动态加载内容，在回调里重新执行
$('#target-container').load('your-content-url', function() {
  setSpanBackground(); // 加载完成后处理新添加的span
});

不管你用$.ajax、$.get还是其他方式动态插入内容，只要在内容加载完成的回调里调用setSpanBackground()就行。

方案二：用DOM突变监听自动处理新元素 #

如果动态加载的场景比较多（比如既有AJAX加载，又有前端JS生成元素），可以用浏览器原生的MutationObserver监听DOM变化，一旦有新的<span>被添加，自动处理它，不用每次手动调用函数：

// 先处理页面已有的span
$('span').each(function() {
  var color = $(this).data('c');
  $(this).css('background', color);
});

// 创建DOM变化观察者
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 遍历所有新增的节点
    mutation.addedNodes.forEach(function(node) {
      // 如果新增的是span元素，直接处理
      if (node.tagName === 'SPAN') {
        const color = $(node).data('c');
        $(node).css('background', color);
      }
      // 如果新增的是包含span的父元素，遍历内部的span处理
      else if (node.querySelectorAll) {
        $(node).find('span').each(function() {
          const color = $(this).data('c');
          $(this).css('background', color);
        });
      }
    });
  });
});

// 配置监听：监听body下所有子节点的添加（包括子树）
observer.observe(document.body, {
  childList: true,
  subtree: true
});

这个方案一劳永逸，不过要注意：MutationObserver是ES6之后的API，主流现代浏览器都支持，但如果需要兼容IE的话就不适用了。

方案三：纯CSS实现（兼容性有限） #

如果你的data-c属性值都是合法的CSS颜色值，可以尝试用CSS直接实现，完全不需要JS，静态和动态元素都能生效：

span.cor {
  background-color: attr(data-c color);
}

⚠️ 注意：attr()函数用于颜色属性的兼容性目前还不够完善，部分旧浏览器不支持，如果你的项目需要兼容旧版本浏览器，还是优先选择前两个JS方案。

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