如何使用 javascript 遍历 html？

Question

I have an HTML code which looks like this:-

<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" %}">
                    <p style="float: right; display: inline !important;" id="ViewCount">
                     .....
                    </p>
                </img>
            </div>
        </div>
        <p class="article-content">{{ post.content|truncatechars:200|safe }}</p>
    </div>
</article>

I am trying to add the values of viewcount asynchronously to all the blogs field. With this js/ajax code:-

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<script>
    $(document).ready(function(){

        setInterval(function()
        {
      $.ajax({
          type:'GET',
          url: "{% url 'getBlogs' %}",
          success: function(response){
          $("#ViewCount").empty();
          for (var key in response.blogs)
          {
              console.log(response.blogs);
              var temp = response.blogs[key].view_count
              $("#ViewCount").append(temp);
          }

          },
          error:function(response){
              alert("No Data Found");
          }
      });
        },1000);
    });
</script>

I have many such blogs, But the values seem to be displayed all at once at only a single field which looks like this:-

But I am trying to display the viewcount of each blogs to its dedicated position. Is there I anyway I can achive it.

Answer 1

One of the easiest way is to use HTML markup to differentiate different viewCount using data attributes.

 blogs={ "1":{ "view_count":1 }, "2": { "view_count":15 } } for (var key in blogs) { var temp = blogs[key].view_count $(`[data-key=${key}]`).append(`${temp} views`); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p data-key="1" id="ViewCount">Key:1 :- </p> <p data-key="2" id="ViewCount">Key:2 :- </p>