如何统计Div卡片内completed出现次数并写入对应userCoursesComplete Span

实现方案 #

原生JavaScript版本 #

直接将以下代码放到页面的<script>标签内即可，会在页面加载完成后自动执行统计：

document.addEventListener('DOMContentLoaded', function() {
  // 定位所有用户卡片，无需依赖动态生成的卡片ID
  const allUserCards = document.querySelectorAll('.user-card');
  allUserCards.forEach(currCard => {
    // 统计当前卡片内completed字符串的出现次数
    const cardFullText = currCard.textContent;
    const completedNum = (cardFullText.match(/completed/g) || []).length;
    // 给当前卡片内的统计span赋值
    const countSpan = currCard.querySelector('.userCoursesComplete');
    if (countSpan) countSpan.textContent = completedNum;
  });
});

jQuery版本（如果项目已引入jQuery可直接用） #

$(document).ready(function() {
  $('.user-card').each(function() {
    const completedNum = ($(this).text().match(/completed/g) || []).length;
    $(this).find('.userCoursesComplete').text(completedNum);
  })
})

逻辑说明 #

• 完全适配你提供的HTML结构，无需修改现有页面标签即可生效
• 不依赖动态生成的卡片ID，通过公共类定位卡片，兼容每次加载ID变化的场景
• 匹配不到completed字符串时默认返回0，不会出现报错问题
• 只会操作当前遍历卡片内部的统计span，不同卡片的统计结果不会互相干扰

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