Replace attribute with an index value in jQuery -

i have list of images (thumbs) near container 1 image. want jquery count index of <a> element, , replace number of src attribute of image below.

i mean, considering code:

<ul class="thumbs">     <li><a href="#"><img src="img1.jpg" alt="image here"/></a></li>     <li><a href="#"><img src="img2.jpg" alt="image here"/></a></li>     <li><a href="#"><img src="img3.jpg" alt="image here"/></a></li>     <li><a href="#"><img src="img4.jpg" alt="image here"/></a></li> </ul>  <div class="container">     <img src="img1.jpg" alt="destiny image here"/> </div> 

the expected behavior is, when user clicks second <a>, .container img change src attribute img1.jpg. , when click fourth <a> attribute should change img3.jpg.

i have got far: jsfiddle demo

$(document).ready(function() {     $(".thumbs li a").click(function () {         //$('div.container').toggleclass('on');         var index = $(".thumbs li a").index(this);         $("div.container img[src^='img']").replacewith("img" + index + ".jpg");     }); }); 

it doesn't absolutely nothing. don't think understand .replacewith method.

also, commented line works fine when it's alone... when rest of code present div.container don't change class. related way declare variable?

you aren't replacing attribute, replacing img element.

you need set attribute .attr('src', value).

replacewith() replacing elements other html elements.