CODEWITHSUNDEEP
javascriptjqueryeach
Hugues Brunelle
Hugues Brunelle

Reputation: 3

How to get each element and assign them an inline style contained inside the child

I've been looking for an elegant solution for a day now and I am pretty new to jQuery.

I would like to get each .figure and assign them an inline style where the value is contained inside the child element via a custom data- attribute :

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

In other words, the results would be :

...
<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);">
...

Also, I'm always ready something about jQuery so if you have any books about JavaScript or jQuery to suggest, that is always appreciated.

Upvotes: 0

Views: 193

Answers (4)

Richard
Richard

Reputation: 4415

How about this (Working code example: http://jsfiddle.net/jpbH2/2/):

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

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

});

Edit

I actually didn't notice the data-thumbnail. Edited my answer above

Upvotes: 0

Parthik Gosar
Parthik Gosar

Reputation: 11646

This should work

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

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816442

You can iterate over all .picture elements, find the image descendant and read its data attribute:

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

Some methods, like .css even accept functions so that you can iterate over the selected elements implicitly.

Reference: .css, .children, .data

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

you can iterate over each item with the class thumbnail and set the css property to the closet div.

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

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

Upvotes: 0

Related Questions