如何用jQuery查找并替换class为mp-e的div的background-image属性

错误原因 #

• 原代码最后一行的选择器div.mp-e background image写法错误：background是CSS属性，并非独立的DOM元素，无法通过该选择器匹配到目标节点
• div.mp-e的背景图片是通过行内style的background属性定义的，不是img标签的src属性，使用attr('src')无法修改背景图配置

修正方案 #

将原来的最后一行代码：

$(this).find('div.mp-e background image').attr('src', myAvatar);

替换为以下代码即可：

$(this).find('div.mp-e').css('background-image', 'url("' + myAvatar + '")');

如果需要覆盖原行内style里的全部background相关配置，也可以写成：

$(this).find('div.mp-e').css('background', 'url("' + myAvatar + '")');

完整修正后的JS代码 #

<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').css('background-image', 'url("' + myAvatar + '")');
  });
</script>

内容的提问来源于stack exchange，提问作者spilledjavascript