添加图像叠加层的问题(jQuery)

Question

我想要做的是找到具有特定类名的所有图像,并在其上放置叠加图像.我的脚本到目前为止在jQuery 1.2.6中:

jQuery.noConflict();
jQuery(document).ready( function($) {
  var module = $(".module-contactus div div div");
  module.find("img.let").each( function() {
    var iWidth = $(this).width();
    var iHeight = $(this).height();
    var letimg = $('<img src="/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />');
    var wrapper = $( '<span style="position: relative; display: inline-block;"></span>' );
    $(this).wrap( wrapper );
    letimg.appendTo( wrapper );
  });
});

的letimg(如萤火虫)不被添加到文档中.该span元素成功包装了原始图像.此外,如果我$(this)进入appendTo函数,它确实有点工作,但它被添加到原始图像内!

编辑:标记在下面.(额外的div是Joomla的结果.)

<div class="module-contactus">
<div><div><div>

<img src="/contact1.jpg" />
<img class="let" src="/contact2.jpg" />

</div></div></div>
</div>

运行脚本后,第二个图像将替换为:

<span style="position: relative; display: inline-block;">
<img class="let" src="/contact2.jpg" />
</span>

但是,它应该像这样结束:

<span style="position: relative; display: inline-block;">
<img class="let" src="/contact2.jpg" />
<img src="/LET.png" style="..." />
</span>

Answer 1

这对我有用:

jQuery.noConflict();
jQuery(function($) {
    $("img.let", $(".module-contactus div div div")).each(function() {
        var iWidth = $(this).width();
        var iHeight = $(this).height();
        var letimg = '<img src="http://www.roomsinworcester.co.uk/images/stories/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />';
        var wrapper = $('<span style="position: relative; display: inline-block;"></span>');
        $(this).wrap(wrapper).after(letimg);
    });
});

作为旁注.我拿出了你的几个变量,并说你可能会继续删除其他变量(将img标签直接放入after,将包装器直接放入wrap函数等).不管怎么说,这不是什么大问题.