jQuery用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

）中的所有图像并进行转换

任何帮助都将不胜感激。

---

C

哦，通过你总能做到的每一件事，做得很好

$('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>');

});

$（'div.image-container img'）。每个（函数（i，o）{
//用于您的一个img标签的函数
//可通过$（o）轻松访问，例如。
$（o）.替换为（'image'）；
});

请试试这个<代码>：）

希望这符合原因

：）

API:

代码

$("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());

});

​

$（“div.image-container>img”）。每个（函数（索引）{
索引=索引+1
$（this.replacetwith（'image'）；
警报（索引+'HTML现在更改为=>'+$（“div.image-container”）.HTML（））；
});
​

您可以使用

replaceWith

方法：

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

$（'.image container img'）.replaceWith（函数（i，v）{
返回$（''）{
样式：“背景图像：url（“+this.src+”）”，
html:“图像”
})
})