Jquery 按前缀查找产品标签，并将它们一起显示在shopify前端的一行文本中

我的一些产品具有相同前缀的标签，例如：

颜色系列：中性色

和

颜色系列：米色

我想在前端，它会像这样：

颜色系列：米色、中性色

我成功地获得了这一行，但它重复的次数与具有相同前缀的标记的重复次数相同（在本例中为两次）：

我的流动代码：

{% for tag in product.tags %}
     {% if tag contains "Color Family:" %}
         <div class="bullet">
             <div class="left">Color Family:</div>
             <div class="right bold colorfamily-hook" style="font-weight: bold;">{{tag | replace: 'Color Family:', '' | replace: "||", ", "}}, </div>
        </div>
     {% endif %}
{% endfor %}

---

如果有多个具有相同前缀的标记，我应该更改什么，使文本行不会重复

您不需要Javascript，这可以通过使用Liquid来实现：

{% assign k = 0 %}
{% for tag in product.tags %}
     {% if tag contains "Color Family:" %}
       {% if k == 0 %}
         {{ tag }}
       {% else %}
         {{ tag | remove: 'Color Family:' | prepend: ', ' }} 
       {% endif %}
       {% assign k = k | plus:1 %}
     {% else %}
       {% continue %}
     {% endif %}
{% endfor %}

说明：首先，启动标签盒的自定义计数器。然后，如果标记是第一个标记，则按原样显示它。如果不是，则删除第一个零件并用逗号替换。完成此案例检查后，您将迭代自定义计数器

{% assign k = 0 %}
{% for tag in product.tags %}
     {% if tag contains "Color Family:" %}
       {% if k == 0 %}
         {{ tag }}
       {% else %}
         {{ tag | remove: 'Color Family:' | prepend: ', ' }} 
       {% endif %}
       {% assign k = k | plus:1 %}
     {% else %}
       {% continue %}
     {% endif %}
{% endfor %}