jQuery get path from data attribute

Question

I have a small problem, I want to get "path" from data attribute and add to background.

HTML

<div>
  <div data-image="../images/header.jpg"></div>
</div>

jQuery

$('[data-image]').css(
    {
        background: "url("+$(this).data('image')+") no-repeat center",
        backgroundSize: "cover",
        height: ($(document).height()/ 3)
    }
);

Do you have any idea how do this?

Are there more than one element with that data attribute? If so, use `each` — adeneo, Dec 27 '14 at 14:05

score 2 · Accepted Answer · answered Dec 27 '14 at 14:04

Just cache the element in a variable and use it

var elm = $('[data-image]'); // cache it
elm.css({
    background: "url("+ elm.data('image') +") no-repeat center", // use it
    backgroundSize: "cover",
    height: ($(document).height()/ 3)
});

If there are more elements, you could use each

elm.each(function(){
    $(this).css({
        background: "url("+ $(this).data('image')+ ") no-repeat center",
        backgroundSize: "cover",
        height: ($(document).height()/ 3)
    });
});

jQuery get path from data attribute

1 Answers1