如何用jQuery正确为frequency类div的逗号分隔文本包裹span标签？

原代码问题分析 #

你的代码只处理第一个.frequency元素，其余元素重复第一个结果的原因是：

• $('.frequency').html()仅返回第一个匹配元素的HTML内容，分割后得到的是第一个div的文本片段。
• $('.frequency').empty().append(...)会将所有.frequency元素的内容统一设置为这个片段生成的span，导致后续元素内容重复。

正确实现代码 #

$('.frequency').each(function() {
  // 获取当前元素的文本并去除首尾空白
  const rawText = $(this).text().trim();
  // 按逗号分割，同时清理每个项的首尾空白
  const labelItems = rawText.split(',').map(item => item.trim());
  // 生成带.label类的span字符串
  const spanHtml = labelItems.map(item => `<span class="label">${item}</span>`).join('');
  // 用生成的span替换原div
  $(this).replaceWith(spanHtml);
});

代码说明 #

1. 使用.each()遍历每个.frequency元素，确保每个元素单独处理。
2. 对每个元素的文本做首尾空白清理，避免分割后出现空内容或多余空格。
3. 分割后给每个文本项生成对应的<span class="label">标签，最后用这些标签替换原div，达到你期望的输出效果。

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