I am trying to optimize this code to find and replace the background image for the div class mp-e, but i'm struggling to figure out the right piece for the last line of the code. everything else is correct, it's just the .find function that i can't seem to figure out.
HTML
<center>
<div class="mp-a"><div class="mp-b"><!-- |g_title| --></div></div>
<div class="mp-h"> <!-- |posts| --> posts <i class="lar la-star"></i> <!-- |points| --> points</div>
<div class="mp-c"><div class="mp-d">
<div class="mp-e" style="background: url(<!-- |field_7| -->);">
<div class="mp-f"><div class="mp-g">
<!-- |awards| -->
</div></div>
</div>
</div> </div>
<a href="<!-- |field_22| -->"><div class="mp-i">Shipper</div></a>
<a href="<!-- |field_23| -->"><div class="mp-i">Development</div></a>
<a href="<!-- |field_25| -->"><div class="mp-i">Request</div></a>
</center>
Script
<script>
$('div[id*="pid_"]:contains([AI=)').each(function() {
$(this).html($(this).html().replace(/ \[AI=(.+?)\]/i, '<span class="my_avatar" style="display: none">$1</span>'));
var myAvatar = $(this).find('span.my_avatar').text();
$(this).find('div.mp-e background image').attr('src', myAvatar);
});
</script>
any insights would be great. thank you!
CSS styles are not elements that you can find.
You use the .css() method to change the style of an element.
$(this).find('div.mp-e').css('background-image', `url(${myAvatar})`);
You placed backgroud and image as HTML elements while they are CSS attributes.
Try this, a bit different than yours
$(this).find('div.mp-e').css({
"background": " url('YOUR IMAGE PATH')"
})
To add more CSS attributes add , to the object inside the .css function then enter your attribute : value