Question

I have the following html structure:

<div>
<button>
<img src="img/a.png" />
</button>
<h2>Title</h2>
</div>

The behaviour I would like to achieve is that, when the user clicks on the h2 title, the image in the button field changes. I have tried the following jQuery code, but it won’t work and I’d be glad if someone could help me pointing out where I went wrong:

$('h2').click(function(){
    $(this).parentsUntil('div').children('button').children('img').attr('src','img/b.png');
});

Thanks very much in advance

Answer 1

$('h2').click(function(){
    $(this).siblings('button').children('img').attr('src','img/b.png');
});

And of course the customary fiddle for you: http://jsfiddle.net/UbMyW/