jquery set css background from href value

Question

I have an image path that is being outputted to the href of an anchor tag. I'd like to set that image as the background for the anchor.

This is my snippet:

jQuery('.initialize a').css({
backgroundImage: 'url(' + this.href + ')'
,backgroundRepeat: 'no-repeat'
,backgroundPosition: '0 0'
});

Which returns background-image: url(foo/undefined); on the anchor.

What am I doing wrong?

ETA:

jQuery('.initialize a').each(function() {
this.setAttribute("href", this.getAttribute("href").replace(',\'', ''));
var href = this.getAttribute("href");
this.setAttribute("href", href.substr(0, href.length-14));
});

So I'm using the above to clean the output for the href attribute up a bit.

The suggested solution to my problem:

$(this).css({background-image: 'url(' + this.href + ')', ...});

should fit right in there. But I am not getting this to work, presumably due to the way my jQuery function is formatted. The $ is unavailable to me a at present. How can I fit this in?

Rémi Breton · Accepted Answer · 2012-02-24 14:12:08Z

1

You could use the jQuery object of this to get href.

$(this).attr('href');

answered Feb 24, 2012 at 14:12

Rémi Breton

4,2992 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bianca Oortwijn Over a year ago

That is what I am trying to do. Look at the second line, is there a mistake in formatting?

Anthony Grist Over a year ago

@BiancaOortwijn The problem is that this in that context doesn't refer to the element being modified.

Bianca Oortwijn Over a year ago

That makes sense. Do you have a suggestion on how to proceed? I am not very good with jQuery.

SachinGutte Over a year ago

this refers to current element in javascript but in jQuery it is $(this) .

SachinGutte Over a year ago

@AnthonyGrist Correct.But if this is inside jQuery event handler, this can not be used to call jQuery methods though it refers to element that triggered it. WRT line - It's very, very unlikely that this will actually be the correct element. this will always refer to element whose context it is in. It may not be correct or rather the element we want. I faced situations where I mistaken the context. Like in ajax success function I was trying to use this to element whose event handler actually made ajax call. I was wrong there. But at that time this referred to the success function.

|

Anthony Grist · Accepted Answer · 2012-02-24 14:19:49Z

1

As I mentioned in my comment, this in the context that you're using it doesn't refer to the element that is being modified. You'll need to use an .each() loop to modify each element individually, so that you can access the attributes you want.

$('.initialize a').each(function() {
    $(this).css({background-image: 'url(' + this.href + ')', ...});
});

answered Feb 24, 2012 at 14:19

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

2 Comments

Bianca Oortwijn Over a year ago

Thank you. You must have noticed the my code formatting in this weird jQuery no conflict mode. I have a feeling your code is correct, but doesn't fire still because of the $. Will report back.

Rémi Breton Over a year ago

Just replace $ with jQuery, no?

falsarella · Accepted Answer · 2012-02-24 19:05:29Z

0

Use noConflict to use jQuery.
Put it in the background using jQuery's css function.
JsFiddle sample.

answered Feb 24, 2012 at 19:05

falsarella

12.5k10 gold badges75 silver badges119 bronze badges

Collectives™ on Stack Overflow

jquery set css background from href value

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related