如何将AEM组件中div的ID复制到CSS选择器中？

我在AEM组件的Sightly代码中编写了如下结构，希望通过jQuery将div生成的ID替换到内部style标签的三个CSS选择器#id-placeholder位置。页面上会存在多个此类卡片，因此需要遍历处理每个卡片，但编写的jQuery代码未能成功替换CSS中的ID。

现有Sightly代码 #

<div id="${card.id}" class="card flex-card radius-lg rel bgcolor ${card.cardTheme}"
     role="region" tabindex="-1">
    <sly data-sly-test.isImageTheme="${card.cardTheme == 'theme-light-bg-img' || card.cardTheme == 'theme-dark-bg-img'}">
        <style data-sly-test="${isImageTheme}">
            @media (min-width:1025px) {
                #id-placeholder {
                    background-image: url(${card.imageLifestyle @ context='attribute'});
                    background-size: cover;
                    background-position: bottom right;
                }
            }
            @media (min-width:768px) and (max-width:1024px) {
                #id-placeholder {
                    background-image: url(${card.imageLifestyleTablet @ context='attribute'});
                    background-size: cover;
                    background-position: bottom right;
                }
            }
            @media (max-width:767px) {
                #id-placeholder {
                    background-image: url(${card.imageLifestyleMobile @ context='attribute'});
                    background-size: cover;
                    background-position: bottom right;
                }
            }
        </style>
    </sly>
</div>

尝试的jQuery代码 #

$(".card").each(function() {
    var id = $(this).attr('id'); 
    var style = $(this).find('style').html(); 
    style = style.replace(/#id-placeholder/g, '#' + id); 
    $(this).find('style').html(style); 
});

问题排查与解决方案 #

原因分析

1. 执行时机错误：jQuery代码可能在DOM未完全加载时运行，导致无法找到目标元素
2. 内容获取兼容性：使用html()获取style标签内容，部分浏览器可能存在解析问题
3. 无效遍历：遍历所有.card元素，但只有带图片主题的卡片才有style标签，造成无效循环

修正后的jQuery代码

$(document).ready(function() {
  // 只遍历包含style标签的卡片，避免无效操作
  $('.card:has(style)').each(function() {
    const cardId = this.id; // 直接使用原生DOM属性更高效
    const $style = $(this).find('style');
    let cssContent = $style.text(); // 用text()获取纯CSS内容，避免解析问题
    cssContent = cssContent.replace(/#id-placeholder/g, `#${cardId}`);
    $style.text(cssContent);
  });
});

更优方案：直接在Sightly中渲染（无需JS）

既然Sightly本身可以动态生成ID，完全可以在服务器端直接替换占位符，避免依赖客户端JS，兼容性和性能更好：

<div id="${card.id}" class="card flex-card radius-lg rel bgcolor ${card.cardTheme}"
     role="region" tabindex="-1">
    <sly data-sly-test.isImageTheme="${card.cardTheme == 'theme-light-bg-img' || card.cardTheme == 'theme-dark-bg-img'}">
        <style data-sly-test="${isImageTheme}">
            @media (min-width:1025px) {
                #${card.id} {
                    background-image: url(${card.imageLifestyle @ context='attribute'});
                    background-size: cover;
                    background-position: bottom right;
                }
            }
            @media (min-width:768px) and (max-width:1024px) {
                #${card.id} {
                    background-image: url(${card.imageLifestyleTablet @ context='attribute'});
                    background-size: cover;
                    background-position: bottom right;
                }
            }
            @media (max-width:767px) {
                #${card.id} {
                    background-image: url(${card.imageLifestyleMobile @ context='attribute'});
                    background-size: cover;
                    background-position: bottom right;
                }
            }
        </style>
    </sly>
</div>

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