2

私の関数では、動的に作成されたキャプションを追加して画像を取得し、それをすべて div できちんとラップしたいと考えています。

前：

<img src="whatever" />

後：

<div class="imageBlock">
 <img src="whatever" />
 <span class="caption">The Caption</span>
</div>

これは私が現在持っているものです：

var imageCaption = '<span class="caption">'+array[1]+'</span>'
$(this).after(imageCaption).wrap('<div class="imageBlock '+array[0]+'" />');

これは機能していますが、スパンを終了divタグの外側に配置しています。

4

3 に答える 3

3

実際に何thisを指しているのかに注意を払う必要があります。

順序を逆にするだけで、必要なものを取得できます。

var imageCaption = '<span class="caption">'+array[1]+'</span>'
$(this).wrap('<div class="imageBlock '+array[0]+'" />').after(imageCaption);

これは、渡されるオブジェクトが元のイメージ タグであるためです。もともとafterタグを呼び出すので、それは正しく行われますが、その呼び出しから返されるのは元の画像要素だけであり、両方ではありません。したがって、wrap を呼び出すときは、元のイメージ タグでのみ呼び出します。最初にラップすると、イメージ タグがラップされた要素の子になりafter、正しい場所に挿入されます。

このほうが分かりやすいかもしれませんが、

var myImage = $(this);
myImage.after(imageCaption);
myImage.wrap('<div class="imageBlock '+array[0]+'" />');

問題が見えますか？

于 2012-05-08T14:50:59.893 に答える
0

試す

$(document).ready(function() {
    $('#x').wrap('<div class="imageBlock">');
$('<span class="caption">The Caption</span>').insertAfter($('#x'));
});​

'x' は<img src="whatever">要素の ID 属性値です

于 2012-05-08T14:50:21.273 に答える
0

これがあなたを始めるためのフィドルです： http://jsfiddle.net/c3nxe/

于 2012-05-08T14:56:23.760 に答える