Question

I use the code below to change background-image of a div from the input field’s value which works fine:

$(".ImageUrl").blur(function(){
    $(".Image").css("background-image", "url("+$(this).val()+")");
});

<div class="wrap">
    <section>
        <input class="ImageUrl"/>
        <div class="Image"></div>
    </section>
</div>

Not suprisingly, when a duplicate .wrap div is added & an url is typed, it changes both divs’ backgrounds as in this example:

http://jsfiddle.net/adige72/tKS6j/

What i want is that each “wrap” works as if there is only one “wrap”.

Thanks in advance!

Answer 1

Just select the sibling .Image

$(".ImageUrl").blur(function(){
    $(this).siblings(".Image").css("background-image", "url("+$(this).val()+")");
});

EDIT

The above assumes that when you say, “Not suprisingly, when a duplicate div is added” you mean a duplicate .wrap div.

Cheers