Storing attribute values for use with jQuery

Question

I have a set of links like so

<a class="colorBox" href="#" title="#0676B3"></a>
<a ...
<a ... these are similar links with the title containing the color value
<a ...

My goal is to use jQuery to grab the value of the title attribute and plug that into the background with .css().

My latest attempt is this:

$(document).ready(function(){
      $('a.colorBox').find().attr('title',function(){
          var color = (this);
          $('a.colorBox').css('background',color);
      });
  });

of coarse this does nothing but return an error. I'm sure it's because you cant have a callback in the .attr(). I can select the value easily but how do i store it into a variable? and how would you make the variable change to the next links title value and use that? with the .each() but how?

I am learning still so any code examples would be great or if there is an API function i am not aware about please let me know

thanks

Shef · Accepted Answer · 2011-07-15 17:09:33Z

3

$(document).ready(function(){
    $('a.colorBox').each(function(){
      var $this = $(this);
      $this.css('background-color', $this.attr('title'));
    });
});

answered Jul 15, 2011 at 17:09

Shef

45.6k15 gold badges82 silver badges91 bronze badges

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

Comments

digitalbath · Accepted Answer · 2011-07-15 19:50:03Z

2

Try this:

$(function() {
    $('a.colorBox').each(function() {
        $(this).css('background-color', this.title);
    });
});

However, title is probably not the right place to stick a value like this. you'd likely be better off using a data attribute for what you're trying to accomplish, eg.

<a class="colorBox" href="#" data-bgcolor="#0676B3"></a>

and changed the javascript to something like

$(function() {
    $('a.colorBox').each(function() {
        var self = $(this);
        self.css('background-color', self.attr('data-bgcolor'));
    });
});

edited Jul 15, 2011 at 19:50

answered Jul 15, 2011 at 17:08

digitalbath

7,3842 gold badges19 silver badges15 bronze badges

5 Comments

Danferth Over a year ago

thank you in learning jQuery i have found that when finding the answer it opens a whole new door in understanding the code and how it works.

gen_Eric Over a year ago

You can also get the data-bgcolor attribute by using $(this).data('bgcolor').

Danferth Over a year ago

I like it thanks for the input. I've learned so much here in 10 min I thought you could only put values or variables in the property values of .css() I never thought of what was ofered as a solution. Many thanks. And Thank you Rocket I will be adding the .data('bgcolor')

Shef Over a year ago

Inefficient usage of $(this). I agree it won't make much of a difference in this case, but you better cache the jQuery objects, or you will end up with big overheads.

digitalbath Over a year ago

@shef true, I was just being lazy

Paul · Accepted Answer · 2011-07-15 17:09:07Z

0

$(document).ready(function(){
  $('a.colorBox').each(function(){
    $(this).css('background-color', $(this).attr('title'));
  });
});

answered Jul 15, 2011 at 17:09

Paul

142k28 gold badges285 silver badges272 bronze badges

Comments

marc · Accepted Answer · 2011-07-15 17:10:14Z

0

Try

$(function() {
    $('a.colorBox').each(function() {
        $(this).css('background-color', $(this).attr('title'));
    });
});

answered Jul 15, 2011 at 17:10

marc

6,2431 gold badge31 silver badges33 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2011-07-15 17:17:29Z

0

You should try to use the data attributes

<a class="colorBox" href="#" data-bgcolor="#0676B3"></a>

In the js you can use jQuery data method to retrieve the value

$(function() {
    $('a.colorBox').each(function() {
        $(this).css('background-color', $(this).data('bgcolor'));
    });
});

answered Jul 15, 2011 at 17:17

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Collectives™ on Stack Overflow

Storing attribute values for use with jQuery

5 Answers 5

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related