javascript - 如何获取每个元素并为其分配包含在子元素中的内联样式

Question

一天以来，我一直在寻找一个优雅的解决方案，而且我对 jQuery 还是很陌生。

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

<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  + '")');
});