In my Sightly for an AEM component, I have the following setup. How can I use jQuery to dynamically insert the generated id into multiple CSS styles within each card on the page?
<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>
I've attempted to update the CSS using jQuery without success. Here is the latest code snippet I tried:
$(".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);
});