如何解决Jinja循环渲染双列表时出现内容重复的问题？

问题分析 #

你当前的问题源于循环逻辑错误：

• 嵌套循环会让每个标题对应所有内容，产生笛卡尔积式的重复输出
• 分开循环会导致标题和内容完全分离，无法一一对应

下面提供两种直接有效的解决方案：

方案1：后端打包配对数据（推荐） #

在Python代码中将标题和内容列表打包成配对的元组列表，前端只需循环一次即可对应渲染：

修改后的Python代码

@app.route('/campervans')
def campers():
    # 修正原代码中的变量名冲突问题（避免循环变量和迭代对象同名）
    title_elements = # 你的标题元素爬取逻辑（比如soup.select('.title')）
    content_elements = # 你的内容元素爬取逻辑（比如soup.select('.content')）
    
    van_headings = [elem.getText() for elem in title_elements]
    contents = [elem.getText().strip() for elem in content_elements]
    
    # 将标题和内容一一配对打包
    van_data = list(zip(van_headings, contents))
    
    return render_template('campers.html', van_data=van_data)

对应的Jinja模板代码

<div class="row featurette">
  <div class="col-md-7"><br/>
      {% for title, content in van_data %}
      <h2 class="featurette-heading fw-normal lh-1">{{ title }}</h2>
      <p class="lead">{{ content }}</p>
      {% endfor %}
  </div>
</div>

方案2：前端通过索引配对（无需修改后端） #

利用Jinja的loop.index0（当前循环的起始索引），直接从内容列表中取对应位置的元素：

修改后的Jinja模板代码

<div class="row featurette">
  <div class="col-md-7"><br/>
      {% for title in titles %}
      <h2 class="featurette-heading fw-normal lh-1">{{ title }}</h2>
      <!-- 用loop.index0获取当前标题对应的内容索引 -->
      <p class="lead">{{ data[loop.index0] }}</p>
      {% endfor %}
  </div>
</div>

注意事项 #

• 确保titles和data两个列表的长度完全一致，否则会出现索引越界或内容不匹配的问题
• 原Python代码中存在变量名冲突（[title.getText() for title in title]），必须修正迭代对象的变量名，否则会引发运行错误

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