Javascript 不带id的div的淡入效果

我已经用flask创建了我的网站。帖子是通过“for”语句放在页面上的。问题是每篇文章都是同一个类，它没有任何id。我想添加一些简单的淡入或不透明效果。有没有一种简单的方法可以做到这一点而不会弄乱代码

我不喜欢JS，我看了一些教程，但没有发现任何有用的东西。每个病例均使用id为的div

{% for post in posts.items %}
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ url_for('static', filename='profile_pics/' + post.author.image_file) }}">
  <div class="media-body">
    <div class="article-metadata">
      <a class="mr-2" href="{{ url_for('users.user_posts', username=post.author.username) }}">{{ post.author.username }}</a>
      <small class="text-muted">{{ post.date_posted.strftime('%Y-%m-%d') }}</small>
    </div>
    <h2><a class="article-title" href="{{ url_for('posts.post', post_id=post.id) }}">{{ post.title }}</a></h2>
    <p class="article-content">{{ post.content[:300] }}... <hr /><small class="text-muted"><a href="{{ url_for('posts.post', post_id = post.id) }}">read more >></a></small></p>
  </div>
</article>

{% endfor %}

{%for posts in posts.items%}
{{post.date_post.strftime（“%Y-%m-%d”）}
{{post.content[:300]}

{%endfor%}

我不清楚您是否试图错开元素的淡入。下面是一个错开渐变的示例

const articles=document.querySelectorAll（'.media.content节'）；
articles.forEach（（文章，索引）=>{
设置超时（（）=>{
article.classList.add（'show'）；
}（索引*350））
});
.media.content-section{
不透明度：0；
过渡：不透明度0.35s缓和；
背景色：红色；
显示：内联块；
宽度：100px；
高度：100px；
}
.media.content-section.show{
不透明度：1；
}
最简单的方法是在项目中包含animate.css库


然后只需将动画fadeIn类添加到您的文章标签（或）您希望添加fadeIn效果的任何其他标签


…
为什么不在
中添加一个id<代码>

？工作正常。非常感谢。