如何用jQuery修改JavaScript动态生成数字的小数点后字体大小？

首先，你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'each')错误，大概率是jQuery未正确引入，或者代码执行时jQuery还没加载完成。先确认页面里已经通过<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>这类标签引入了jQuery，或者直接改用原生JS实现，避免依赖。

针对动态生成的价格元素，以下是几种可行方案：

方案一：在动态生成价格后直接调用格式化函数 #

这是最高效的方式——既然你知道价格是JS动态生成的，就在生成并插入DOM的代码后面，立刻执行格式化逻辑：

jQuery版本 #

// 假设这是你生成价格的代码
function generatePrice() {
  const priceHtml = '<span class="price">$ 270.30</span>';
  $('#price-container').html(priceHtml);
  
  // 生成后立刻执行格式化
  formatPriceFont();
}

// 把格式化逻辑封装成函数
function formatPriceFont() {
  $('.price').each(function(){
    const price = $(this).html();
    $(this).html(price.replace(/(\D*)(\d*\.)(\d*)/,'<span style="font-size:16px;">$1</span><span style="font-size:22px;">$2</span><span style="font-size:14px;">$3</span>'));
  });
}

// 调用生成价格的函数
generatePrice();

原生JS版本（无需jQuery） #

function generatePrice() {
  const priceSpan = document.createElement('span');
  priceSpan.className = 'price';
  priceSpan.textContent = '$ 270.30';
  document.getElementById('price-container').appendChild(priceSpan);
  
  // 生成后格式化
  formatPriceFont();
}

function formatPriceFont() {
  const priceElements = document.querySelectorAll('.price');
  priceElements.forEach(el => {
    const price = el.textContent;
    const formatted = price.replace(/(\D*)(\d*\.)(\d*)/, '<span style="font-size:16px;">$1</span><span style="font-size:22px;">$2</span><span style="font-size:14px;">$3</span>');
    el.innerHTML = formatted;
  });
}

generatePrice();

方案二：用MutationObserver监听DOM变化自动格式化 #

如果无法修改生成价格的代码，可以用DOM监听工具，自动捕捉新增的.price元素并格式化：

原生JS实现 #

// 目标容器（假设价格都插入到这个容器里）
const targetContainer = document.getElementById('price-container');

// 配置监听选项
const observerConfig = {
  childList: true, // 监听子元素增减
  subtree: true // 监听子树变化
};

// 监听回调函数
const observerCallback = (mutations) => {
  mutations.forEach(mutation => {
    // 检查新增的节点里有没有.price元素
    mutation.addedNodes.forEach(node => {
      if (node.classList?.contains('price')) {
        formatSinglePrice(node);
      }
      // 如果新增的是容器，遍历里面的.price元素
      if (node.querySelectorAll) {
        node.querySelectorAll('.price').forEach(el => formatSinglePrice(el));
      }
    });
  });
};

// 单个价格元素的格式化函数
function formatSinglePrice(el) {
  const price = el.textContent;
  const formatted = price.replace(/(\D*)(\d*\.)(\d*)/, '<span style="font-size:16px;">$1</span><span style="font-size:22px;">$2</span><span style="font-size:14px;">$3</span>');
  el.innerHTML = formatted;
}

// 启动监听
const observer = new MutationObserver(observerCallback);
observer.observe(targetContainer, observerConfig);

// 同时对已存在的.price元素格式化
document.querySelectorAll('.price').forEach(el => formatSinglePrice(el));

方案三：CSS结合数据属性实现（无需JS） #

如果可以修改动态生成的代码，还可以把价格拆成三部分存在数据属性里，用CSS控制样式，完全不用JS：

HTML（动态生成时输出这种结构） #

<span class="price" data-currency="$ " data-integer="270" data-decimal="30"></span>

CSS样式 #

.price::before {
  content: attr(data-currency);
  font-size: 16px;
}
.price::after {
  content: attr(data-decimal);
  font-size: 14px;
}
.price {
  font-size: 22px;
}

这种方式更简洁，性能更好，适合能控制生成HTML结构的场景。

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