JQuery: Appending Attribute Value to Each Element
I am 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&开发者_Go百科quot;).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.
Try:
$("img").each(function () {
var originalSrc = $(this).attr('src');
$(this).attr('src', 'http://www.domain-name.com/' + originalSrc);
});
Even less work with (compare http://api.jquery.com/attr/) :
$("img").attr('src', function(i, val){
return 'http://www.domain.com/' + val;
});
$("a").attr('href', function(i, val){
return 'http://www.domain.com/' + val;
});
Greets
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);
});
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.
Inside each function use $(this)
instead of $(a)
and $(img)
.
精彩评论