.find background-image in javascript-CodePudding

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  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!

CodePudding user response：

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})`);

CodePudding user response：

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