如何在图片展示前按条件排序 实现同边框颜色图片分组展示

首先你现有代码存在逻辑优先级错误：同时属于image_list_1和image_list_2的图片会被第一个if分支提前匹配，永远无法触发绿色边框的判断，需要先修正这个问题，再按分组逻辑调整实现。

实现步骤 #

• 第一步：提前将所有图片按归属规则拆分为4个独立分组，避免渲染时临时判断打乱顺序：

  分组规则	边框样式	分组名
  同时存在于image_list_1和image_list_2	绿色4px边框	group_both
  仅存在于image_list_1	深粉色4px边框	group_only1
  仅存在于image_list_2	蓝色4px边框	group_only2
  都不存在于两个列表	无边框	group_other

• 第二步：按分组顺序依次渲染每组内的所有图片，同组图片自然会集中展示，你也可以给每个分组额外添加标题、分割线等标识区分不同类别。

代码示例 #

1. 后端预处理分组（以Python为例，推荐提前在业务逻辑中处理，减少模板复杂度） #

# 先计算两个列表的交集
both_images = set(image_list_1) & set(image_list_2)
group_both = [img for img in all_images if img in both_images]
group_only1 = [img for img in all_images if img in set(image_list_1) - both_images]
group_only2 = [img for img in all_images if img in set(image_list_2) - both_images]
group_other = [img for img in all_images if img not in set(image_list_1) and img not in set(image_list_2)]
# 把四个分组传入模板即可

2. 模板渲染代码 #

<!-- 绿色边框组 -->
<div class="image-group">
  {% for image in group_both %}
  <div class="zoom">
    <img class='img' style="border-style:solid;border-color:rgb(49, 189, 0);border-width: 4px ;" src="{{ image.url }}" loading="lazy" />
  </div>
  {% endfor %}
</div>

<!-- 深粉色边框组 -->
<div class="image-group">
  {% for image in group_only1 %}
  <div class="zoom">
    <img class='img' style="border-style:solid;border-color:deeppink;border-width: 4px ;" src="{{ image.url }}" loading="lazy" />
  </div>
  {% endfor %}
</div>

<!-- 蓝色边框组 -->
<div class="image-group">
  {% for image in group_only2 %}
  <div class="zoom">
    <img class='img' style="border-style:solid;border-color:rgb(20, 149, 255);border-width: 4px ;" src="{{ image.url }}" loading="lazy" />
  </div>
  {% endfor %}
</div>

<!-- 无边框组 -->
<div class="image-group">
  {% for image in group_other %}
  <div class="zoom">
    <img class='img' src="{{ image.url }}" loading="lazy" />
  </div>
  {% endfor %}
</div>

如果不方便修改后端逻辑，也可以直接在Jinja2模板中先完成分组计算再渲染：

{% set both = image_list_1|list|intersect(image_list_2|list) %}
{% set only1 = image_list_1|list|difference(both) %}
{% set only2 = image_list_2|list|difference(both) %}
{% set other = all_images|list|difference(image_list_1|list)|difference(image_list_2|list) %}
<!-- 后续按上面的分组渲染逻辑编写即可 -->

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