attr.src works with id but not with class

attr.src works with id but not with class


I am building a simple form to dynamically change image; the idea is
that you write a number into input field, click OK and the new image
is loaded. I wanted to put a dozen of similar forms on a page and use
as little (x)HTML code as possible, so I decided to use a class, not
ids. Alas, while I can manage to do what I wanted while calling the
specific id, I can't do the same using $(this). Is this intended, am I
doing anything wrong or is it a bug? Here's my HTML:
<div>
<img src="1.jpg" alt="" class="cover" id="img1" />
<input type="text" />
<button>ok<button>
</div>
Here's my JS:
$(document).ready(function() {
$("img.cover").parent("div").children("button").click(function () {
// $(this).attr("src", $
(this).parent("div").children("input").val() + ".jpg");
$("#img1").attr("src", $
(this).parent("div").children("input").val() + ".jpg");
});
});
With $("#img1") it works like a charm; however with $(this) not a
chance. I used alert() to find out that the input's value, ie. $
(this).attr("src", $(this).parent("div").children("input").val(), is
being found properly, but for some reason new image isn't loaded.
I'll be most thankful for any suggestions.
PS. Line $("img.cover").attr("src", $
(this).parent("div").children("input").val() + ".jpg") works, and
*all* images with class "cover" are being reloaded (of course).