jQuery $("img[src=the_image_souce]").attr('src','new_src'); does not work

Question

My code does not work I don't know why the_image_source and new_src are just place holders I have put real values in them

I have also tried $("img[src=the_image_souce]")[0].attr('src','new_src'); but it does not work either, please help

Answer 1

Ok, what browser and jQuery versions? Also, what's not working, the selector, setting the attribute, or leading the new image? Start simple, what does alert($("img[src=imgsrc])] show you? Also what does firebugs say is in the DOM after that code runs?

Answer 2

You must be aware by accessing the [0] element in the jQuery Object this will return the DOM element. You cannot use the jQuery attr() method directly on a DOM element. It must be run on a jQuery Object

Essentially if you will have more than one element that matches the following selector an you want to access the first matched element $("img[src='http://domain.com/image.jpg]") then you should use .first() or .eq(). Example

$("img[src='http://domain.com/image.jpg']").first().attr('src','http://domain.com/newimage.jpg')

or

$("img[src='http://domain.com/image.jpg']").eq(0).attr('src','http://domain.com/newimage.jpg')

or

$($("img[src='http://domain.com/image.jpg']")[0]).attr('src','http://domain.com/newimage.jpg');

but this just looks strange

Answer 3

Not for nothing but attribute selector isn't properly written. The " is important. Therefor you need:

$('img[src="the_image_source"]')

Answer 4

If you use a relative path as image-src, it depends on the browser, what he will retrieve as src. Most Browsers will return the absolute path, not the relative path, so your match fails.

You can only compare the end of the src:

$("img[src$='the_image_source']").attr('src','new_src');

But if you have more images with the same filename in different directories, this may force unexpected results. The best way I think is to use always absolute path inclusive protocol & domain as img-src and in jQuery-selectors.

Answer 5

I'd do what WaldenL suggests and break it down piece by piece to find out what exactly is not working. First check your selector.

alert($("img[src=the_image_source]").length);

if that is greater than zero, then your selector is good. if not, then try using the id of the tag (if you know it) or some other way of getting that image tag.

if the selector is good, then there's something wrong with setting the src attribute. Make sure the value of new_src is valid and that you're not doing something silly like putting quotes around your variable or misspellings like this:

var the_image_source = "http://mysite/images/img01.gif";
var new_src = "http://mysite/images/img02.gif";
$('img[src=the_image_souce]').attr('src','new_src'); // won't work - first variable is missing the "r" and not formatted correctly and attr setter has parenthesis
$('img[src=' + the_image_source + ']').attr('src',new_src); // should work

Also, make sure you have it inside the document ready function.

$(document).ready(function() {
    var the_image_source = "http://mysite/images/img01.gif";
    var new_src = "http://mysite/images/img02.gif";
    $('img[src=' + the_image_source + ']').attr('src',new_src);
});