JQuery: Appending Attribute Value to Each Element

Question

Hey guys - I'm trying to append an additional url chunk to an existing attribute and simply update it.

$("img").each(function (i) {
    var originalSrc = $("img").attr('src');
    $("img").attr('src', 'http://www.domain-name.com/' + originalSrc);    
});

$("a").each(function (i) {
    var originalHref = $("a").attr('href');
    $("a").attr('href', 'http://www.domain-name.com/' + originalHref);    
});

It is counting all elements and appending a long string to the final attribute. I understand what's going on, but I'm not sure the correct way to go about this. This is obviously wrong.

Essentially, I'm scrubbing a remote page and I need to reset all relative connections to absolute.

Thanks! :-)

Answer 1

Try:

$("img").each(function () {
    var originalSrc = $(this).attr('src');
    $(this).attr('src', 'http://www.domain-name.com/' + originalSrc);    
});

Answer 2

inside each function use $(this) instead of $(a) and $(img)

Answer 3

Since you are using the each method to loop over your elements, you should use the this keyword inside the callback function, to refer to the currently iterated element:

$("img").each(function (i) {
    var image = $(this), // 'this' is the image element being iterated
        originalSrc = image.attr('src');

    image.attr('src', 'http://www.domain-name.com/' + originalSrc);    
});

Answer 4

Using your code structure:

$("img").each(function (i) {
    var $img = $(this);
    var originalSrc = $img.attr('src');   // use "this" in the $() function to get the current element...
    $img.attr('src', 'http://www.domain-name.com/' + originalSrc);    
});

$("a").each(function (i) {
    var $a = $(this);
    var originalHref = $a.attr('href');
    $a.attr('href', 'http://www.domain-name.com/' + originalHref);    
});

Make sure to use $(this) inside of jQuery's callback functions to retrieve the 'current' node in the node list.