0

これまでの私のコード：

$(".lorem img:not(.full-img)").each(function() { 
    $(this).addClass("inline-img");
    var imgWidth = $(this).prop('width');
    var imgHeight = $(this).prop('height');
    var imgFloat = $(this).prop('float');

    $(this).wrap('<div class="inline-img-wrap" />'); 
        if ($(this).prop("title")!='') {
            $('<p class="inline-img-caption">').text($(this).prop('title')).insertAfter($(this)); 
        }
});

テキストの本文内で画像を検索し、そのtitle値をキャプションとして下に追加し、との両方imgをpでラップしていdiv.inline-img-wrapます。それはうまくいきます。

私が助けを必要としているのは、img代わりに新しいラッピングdivにのスタイルを適用することです。これだけの変数を作成したことがわかりますが、それらを機能に適用することはできません。$this常に画像に適用され、<div class="inline-img-wrap" style="width:'+imgWidth+'">機能しません。

すべてのアドバイスに感謝します！

4

2 に答える 2

1

data属性とcssメソッドを使用してみてください:

<img data-class='something'  src=''/>;


 $(".lorem img:not(.full-img)").each(function() { 
    $(this).addClass("inline-img");
    var imgWidth = $(this).css('width');
    var imgHeight = $(this).css('height');
    var imgFloat = $(this).css('float');

    $(this).wrap('<div class="inline-img-wrap + " " + $(this).data('class') + " />'); 
        if ($(this).prop("title")!='') {
            $('<p class="inline-img-caption">').text($(this).prop('title')).insertAfter($(this)); 
        }

    $("." + $(this).data('class')).css({"width": imgWidth, `height`: imgHeight, `float`: imgFloat})
});
于 2012-06-30T14:47:34.660 に答える
0

新しく作成されたラッピング要素を取得する必要があることは理解できましたか?

var $wrap = $(this).wrap('<div class="inline-img-wrap" />').parent();
if ($(this).prop("title")!='') {
    $('<p class="inline-img-caption">').text($(this).prop('title')).appendTo($wrap); 
}
// do any other manipulations with $wrap

副次的にPS：jQueryオブジェクトをキャッシュします-常に$（this）を呼び出していますが、これは最適ではありません

于 2012-06-30T14:36:08.810 に答える