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!