I have <span> inside a <div>, like so:

<div id="#mydiv">
<a href="#">Hello</a><span class="myImageArea"></span>
    <div class="someClass">
    </div>
</div>                          

With the following CSS:

.myImageArea {  
    background: url("../img/upArrow.png") no-repeat right 5px;
    display: inline-block;
    cursor: pointer;
}

I want to change the attribute background:url of class myImageArea

$('#mydiv').click(function() {
    //change the background image of the class
});

How can this be done?

• jquery

Within the click function you get a reference to the element you've clicked on, using jQuery's selectors, you can now search inside that for the span. Once you have that you can then change the CSS property 'background-image':

$('#myDiv').click(function() {
    $('.myImageArea', this).css('background-image', 'newimagepath.png');
});

Even better, instead of setting the attribute directly you can add custom CSS class (for ex. myFancyBackground). To add the class use following:

$('#myDiv').click(function() {
    $('.myImageArea', this).addClass('myFancyBackground');
});

And in the css file you have:

.myFancyBackground {
  background-image:url('...');
}

So in future, if you like to change the background properties, like image, repeating ... you only have to change the CSS.

$('#mydiv').click(function() {
   $(this).find('.myImageArea').css('background-image', 'url("/path/to/new/image.jpg")');
});

You can do this on the fly using the css() method in jQuery.

$('#mydiv').click(function(){
    $('.myImageArea', this).css({'background-image':'url(path/to/new/image.png)'});
});