Question

我一直在为一天寻找一个优雅的解决方案而且我对jQuery很新。

我想获取每个.figure并为它们分配一个内联样式，其中值通过自定义数据属性包含在子元素中：

<div>
    <a href="#">
        <div class="figure">
            <img class="thumbnail" data-thumbnail="images-01-thumbnail.png" src="images-01.png" />
        </div>
        <div class="content">
            <h3>Sale</h3>
            <h4>Discover our latest styles</h4>
        </div>  
    </a>
    <a href="#">
        <div class="figure">
            <img class="thumbnail" data-thumbnail="images-02-thumbnail.png" src="images-02.png" />
        </div>
        <div class="content">
            <h3>Free Shipping</h3>
            <h4>When you buy xxxxxx</h4>
        </div>
    </a>
    <a href="#">
        <div class="figure">
            <img class="thumbnail" data-thumbnail="images-03-thumbnail.png" src="images-03.png" />
        </div>
        <div class="content">
            <h3>Free Shipping</h3>
            <h4>When you buy xxxxxx</h4>
        </div>
    </a>
</div>

换句话说，结果将是：

...
<div class="figure" style="background: url(images-01-thumbnail.png);">
...
<div class="figure" style="background: url(images-02-thumbnail.png);">
...
<div class="figure" style="background: url(images-03-thumbnail.png);">
...

另外，我总是准备一些关于jQuery的东西，所以如果你有任何关于JavaScript或jQuery的书籍建议，那总是很受欢迎。

Answer 1

您可以迭代所有.picture元素，找到图像后代并读取其数据属性：

$('.figure').css('background', function() {
    return 'url(' + $(this).children('img').data('thumbnail') + ')';
});

某些方法（如.css）甚至接受函数，以便您可以隐式迭代所选元素。

参考：.css，.children，.data

Answer 2

这个怎么样（工作代码示例：http://jsfiddle.net/jpbH2/2/）：

var pathToImages = "/";
$(".figure img").each(function(){

    $(this).parent().css({"background": "url(" + pathToImages + $(this).data('thumbnail') +")"})

});

修改

我实际上没有注意到data-thumbnail。编辑了上面的答案

Answer 3

您可以使用类thumbnail迭代每个项目，并将css属性设置为壁橱div。

$('.thumbnail').each(function() {
    var $this = $(this),
        $background = $this.data('thumbnail');

    $this.closest('.figure').css({background : $background} )
});

Answer 4

这应该有效

$("[data-thumbnail]").each(function ()
{
    var $this = $(this), url = $this.data("thumbnail");
    $this.parents(".figure").css("background-image", 'url("' + url  + '")');
});

如何获取每个元素并为它们分配包含在子元素内的内联样式

4 个答案: