3

私は画像のdivを持っています..例：

<div class="image-container">
    <img width="174" height="174" src="http://mysite.com/images/portfolio/p1.jpg" class="image-style" typeof="foaf:Image">
    <img width="174" height="174" src="http://mysite.com/images/portfolio/p2.jpg" class="image-style" typeof="foaf:Image">
    <img width="174" height="174" src="http://mysite.com/images/portfolio/p3.jpg" class="image-style" typeof="foaf:Image">
    <img width="174" height="174" src="http://mysite.com/images/portfolio/p4.jpg" class="image-style" typeof="foaf:Image">
</div>

そして、jQueryを使用して各画像を調べてdivにし、画像を背景画像として割り当てたい...次のように:

<div class="image-container">
        <div style="background-image:url(http://mysite.com/images/portfolio/p1.jpg)"><span>image</span></div>
        <div style="background-image:url(http://mysite.com/images/portfolio/p2.jpg)"><span>image</span></div>
        <div style="background-image:url(http://mysite.com/images/portfolio/p3.jpg)"><span>image</span></div>
        <div style="background-image:url(http://mysite.com/images/portfolio/p4.jpg)"><span>image</span></div>
</div>

これを行う方法は知っていますが、親 div ( image-container) 内のすべての画像を調べて変換する最良の方法がわかりません。

どんな助けでも大歓迎です。ハ

4

3 に答える 3

3

メソッドを使用できますreplaceWith：

$('.image-container img').replaceWith(function(i, v){
    return $('<div/>', {
        style: 'background-image: url('+this.src+')',
        html: '<span>image</span>'
    })
})

http://jsfiddle.net/FD9gV/

于 2012-11-18T07:24:23.433 に答える
1

ああ、あなたがいつでもできるそれぞれをやり遂げる

$('div.image-container img').each( function(i,o){
    // function for one of your img tags
    // which is accessible easily via $(o), e.g.
    $(o).replaceWith('<div style="background:url(' + $(o).attr('src')+')"><span>image</span></div>');

});
于 2012-11-18T07:13:27.833 に答える
1

これを試してください。:) http://jsfiddle.net/x5HhV/

jquery変更背景画像

これが原因に当てはまることを願っています:)

API: http://api.jquery.com/replaceWith/

コード

$("div.image-container > img").each(function(index) {
    index = index + 1
    $(this).replaceWith('<div style="background-image:url(http://mysite.com/images/portfolio/p' + index + '.jpg)"><span>image</span></div>');

    alert(index + ' HTML is now changed to => ' + $("div.image-container").html());

});

​
于 2012-11-18T07:23:48.220 に答える