将类从父 div 拆分并复制到相邻的 div（液体或 jQuery）

Question

我有以下代码，其中使用了一些液体标记：

<div id="parent" class="grid-item {{ this.filters | downcase | replace: ' ', '-' | replace: ',', ' ' | replace: '/', '-' }}">
    <div class="labels">
        {{ this.filters | prepend: '<filter>' | replace: ',', '</filter><filter>' | append: '</filter>' }}
    </div>
</div>

我有以下过滤器（可以选择 1 个或全部）

情绪板
服装
设计师
造型
照片拍摄
协作
News/Events

假设选择 "Mood Boards"、"Designers"、"Collaboration" 作为过滤器...上面的 Liquid Markup 将输出以下内容：

<div id="parent" class="grid-item mood-boards designers collaboration">
    <div class="labels">
        <filter>Mood Boards</filter>
        <filter>Designers</filter>
        <filter>Collaboration</filter>
    </div>
</div>

我需要它来输出：

<div id="parent" class="grid-item mood-boards designers collaboration">
    <div class="labels">
        <filter class="mood-boards">Mood Boards</filter>
        <filter class="designers">Designers</filter>
        <filter class="collaboration">Collaboration</filter>
    </div>
</div>

这在 Liquid 中可行吗（理想的解决方案）或者如果不行，我们可以在 jQuery 中实现吗？您可以看到类的顺序始终与 <filter> 的顺序对齐。

可能只选择了 1 个或所有上述过滤器，因此代码需要能够将来自 #parent 的类添加到适当的 <filter>'s。

请帮忙！很难描述，所以如果您有问题或需要更多信息，请询问。

编辑：

我只是想如果你可以使用液体为每个可能的过滤器做这样的事情，但我无法让它工作：

<filter class="{{ this.filters[0] | downcase | replace: ' ', '-' | replace: ',', ' ' | replace: '/', '-' }}">
    {{ this.filters[0] }}
</filter>

<filter class="{{ this.filters[1] | downcase | replace: ' ', '-' | replace: ',', ' ' | replace: '/', '-' }}">
    {{ this.filters[1] }}
</filter>

Answer 1

我暂时妥协并使用了以下内容。不幸的是，这并不理想，因为如果过滤器名称发生变化，它们不会在此处自动更改。

{% if this.filters contains "Mood Boards" -%}
    <filter class="mood-boards">Mood Boards</filter>
{% endif -%}

{% if this.filters contains "Outfits" -%}
    <filter class="outfits">Outfits</filter>
{% endif -%}

{% if this.filters contains "Designers" -%}
    <filter class="designers">Designers</filter>
{% endif -%}

{% if this.filters contains "Styling" -%}
    <filter class="styling">Styling</filter>
{% endif -%}

{% if this.filters contains "Photo Shoots" -%}
    <filter class="photo-shoots">Photo Shoots</filter>
{% endif -%}

{% if this.filters contains "Collaboration" -%}
    <filter class="collaboration">Collaboration</filter>
{% endif -%}

{% if this.filters contains "News/Events" -%}
    <filter class="news-events">News/Events</filter>{
% endif -%}

Answer 2

我假设您可以将所选项目作为数组或分隔字符串获取。由于您没有使用非活动过滤器，我们可以忽略它们。

<!--Not sure how your data was coming in, but this 
    gets us to an iterable array:-->
{% assign rawActiveFilters = "Mood Boards,Designers,Collaboration" -%}
{% assign cats = rawActiveFilters | split: "," -%}

<!--catsJoined will be used outside the loop.-->
{% capture catsJoined -%}
    {% for cat in cats -%}
        {{ cat | downcase | replace: '/', '-' | replace: ' ', '-' -}}
    {% endfor -%}
{% endcapture -%}

<!--Remove those unsightly extra spaces. Not required, just preferred.-->
{% capture catsJoinedTidy -%}{{ catsJoined | split: ' ' | join: ' ' }}{% endcapture -%}

<div id="parent" class="grid-item {{ catsJoinedTidy }}">
    <div class="labels">
        {% for cat in cats -%}
            <filter class="{{ cat | downcase | replace: '/', '-' | replace: ' ', '-' }}">
                {{ cat }}
            </filter>
        {% endfor -%}
    </div>
</div>

将类从父 div 拆分并复制到相邻的 div（液体或 jQuery）

Split and copy classes from parent div to adjacent divs (Liquid or jQuery)

html

liquid

business-catalyst

将 类 从父 div 拆分并复制到相邻的 div（液体或 jQuery）

Split and copy classes from parent div to adjacent divs (Liquid or jQuery)

html

liquid

business-catalyst

将类从父 div 拆分并复制到相邻的 div（液体或 jQuery）