画像オーバーレイ（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は（Firebugのに応じて）文書に追加されていません。 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> 

スクリプトが第2の画像は置き換えられ実行された後：

<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タグを直接後置に入れ、ラッパーを直接ラップ関数などに入れます）。しかしどちらの方法でも大したことはありません。

Answer 2

ラッパーがまったく必要ないとは確信していません。

このようなものを試してみてください。

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="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;" />');     
     $(this).before(letimg);   
     alert(module.html()); 
    }); 
    });