I have the following in my Sightly for an AEM component.Using jQuery, how can I copy the id that is generated for the div, into the three CSS styles? There will be several of these cards on the page, so this will need to iterate through each card.
<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>
Here’s the latest jQuery I tried, but nothing seems to be able to set the id in the CSS.
$(".test.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