I am currently faced with the challenge of relocating a background image within a div based on the content of a span.
The complication arises from the fact that multiple divs share the same class and cannot be individually modified.
For instance, each cell where the image position needs to be adjusted appears as follows:
<td class="js-gridBlock js-Pre-order" data-attvalue1="3XL" data-attvalue2="Plum">
<div class="js-gridImage">
<div class="prodpageGridText" id="gridtext-gridbox34">
<span class="status">Due in 4 weeks</span><br>
<div class="prodpageGridTextArrow">
</div>
</div>
</div>
</td>
Where the value within the Span class Status can range from 1 to 10.
My current jQuery script is as follows;
jQuery(document).ready(function() {
if (jQuery('span.status:contains("4")')) {
jQuery('.js-Pre-order .js-gridImage').css("background-position", "-4px -213px");
}
if (jQuery('span.status:contains("5")')) {
jQuery('.js-Pre-order .js-gridImage').css("background-position", "-4px -242px");
}
if (jQuery('span.status:contains("10")')) {
jQuery('.js-Pre-order .js-gridImage').css("background-position", "-4px -387px");
}
});
The issue I am facing is that when the jQuery script is executed, all js-gridImage elements end up with the same
("background-position", "-4px -387px")I have come across the .each() function, but I am unsure of the best way to implement it in my code.
Thank you in advance.