如何用JavaScript遍历HTML并为每个博客匹配显示异步浏览量？

你遇到的核心问题是所有博客条目都使用了同一个id="ViewCount"——HTML中id是唯一标识，jQuery选择$("#ViewCount")只会选中页面中第一个匹配的元素，导致所有浏览量都堆在了同一个位置。下面是分步解决方案：

1. 修改HTML模板：给每个浏览量元素添加唯一标识 #

把原来的id换成class，同时给每个元素添加自定义data-*属性来存储对应博客的唯一标识（比如slug，你的链接已经在用这个字段）：

<article class="media content-section">
  <div class="media-body">
    <h2><a class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}</a></h2>
    <div class="article-metadata">
      <a class="mr-2" href="{% url 'blog-profile' name=post.author %}">{{ post.author }}</a>
      <div class="float-right">
        <small class="text-muted">Category</small>
        <small class="text-muted">{{ post.date_posted }}</small>
      </div>
      <div style="float:right;">
        <img style="height:19px; width:18px;" src="{% static "blog/viewicon.png" %}">
        <!-- 核心修改：id换class，添加data-post-slug绑定博客唯一标识 -->
        <p style="float: right; display: inline !important;" class="view-count" data-post-slug="{{ post.slug }}"> ..... </p>
      </div>
    </div>
    <p class="article-content">{{ post.content|truncatechars:200|safe }}</p>
  </div>
</article>

2. 重写jQuery/Ajax代码：精准匹配每个博客的浏览量 #

调整脚本逻辑，根据后端返回的博客数据，通过data-post-slug找到对应元素并更新内容：

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
  // 封装更新逻辑为函数，方便复用
  function updateBlogViewCounts() {
    $.ajax({
      type:'GET',
      url: "{% url 'getBlogs' %}",
      success: function(response){
        // 遍历返回的所有博客数据
        $.each(response.blogs, function(_, blog) {
          // 根据slug定位到对应的浏览量元素
          const $targetElement = $('.view-count[data-post-slug="' + blog.slug + '"]');
          // 如果找到元素，直接更新浏览量文本
          if ($targetElement.length) {
            $targetElement.text(blog.view_count);
          }
        });
      },
      error:function(){
        console.error("Failed to fetch blog view counts");
        // 建议用控制台日志代替alert，避免频繁弹窗打扰用户
        // alert("No Data Found");
      }
    });
  }

  // 页面加载完成后立即更新一次
  updateBlogViewCounts();
  // 每隔30秒更新一次（原1秒太频繁，会增加服务器压力，可按需调整）
  setInterval(updateBlogViewCounts, 30000);
});
</script>

关键注意事项 #

• 后端数据要求：确保getBlogs接口返回的每个博客对象包含slug（或你选择的唯一标识）和view_count字段，这样前端才能精准匹配。
• 更新频率优化：1秒一次的更新频率会给服务器带来不必要的负载，建议调整为30秒/1分钟，或者仅在页面加载时更新一次。
• 选择器规范：用class代替id选择多个同类型元素，data-*属性是HTML标准的自定义属性，用于存储元素关联的元数据，比硬编码id更灵活。

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