jquery how to parse class or attributes of object

Question

Sorry if this is a 'noob' question. (I've heavily edited it to be clearer as to what I was looking for.) Consider some links:

<p><a class="bgColor_0" href="whatever">Click Me</a></p>
<p><a class="bgColor_1" href="whatever">Click Me</a></p>
<p><a class="bgColor_2" href="whatever">Click Me</a></p>

Somewhere else on the page there is a DIV which also uses the same class name. So in the stylesheet:

div.bgColor_1 {background-color: #ffffff; }
div.bgColor_2 {background-color: #00ffff; }
div.bgColor_3 {background-color: #ffff00; }

What I want is to get the value of the background-color property of the class of the clicked as a string (or a null if not set).

So I want to create a click function which tests for a class beginning with bgColor_

jQuery('a').click( function(){ 
  myClass = jQuery(this).attr('class').match(/\bbgColor_\S+/g); 
  // eg. myClass = 'bgColor_0';
  // now... how do I get the background-color property of bgColor_0?;

} );

What I want to get to is the -value- of the backgroundColor property of the div with the class myClass

eg. If the user clicked a.bgColor_1, I want to obtain the background-color property of the class div.bgColor_1 in the stylesheet and then assign another (to be determined) div to class bgColor_1 so I can change its colour.

Any reason you can't have both `bg_Color_X` and `hasBgColor`? That way you don't have to do any partial match selectors. — Erik Philips, Feb 07 '14 at 20:40
By the way, the classname bgColor_0 is not very semantic. Try looking into http://sass-lang.com/ so you don't have to misuse classnames to avoid repeating the same color in multiple places — Ruan Mendes, Feb 07 '14 at 20:44
@ErikPhilips There is no reason, that's a much cleaner solution in my books. It ties the three elements together semantically instead of relying on substrings to group elements — Ruan Mendes, Feb 07 '14 at 20:46

helion3 · Answer 1 · 2014-02-07T20:37:04.583

2

You're looking for the partial match selector:

$(this).is("[class^='bgColor']")

It's short and sweet, it requires that the class starts with bbgColor like your examples.

If you need to allow for the class to appear anywhere in the attribute, use:

$(this).is("[class*='bgColor']")

edited Feb 07 '14 at 20:37

answered Feb 07 '14 at 20:30

helion3

34,737
15
57
100

Typo? I'm not seeing anything. It works fine: http://codepen.io/helion3/pen/jkDLg – helion3 Feb 07 '14 at 20:32
Sorry, I was reading his HTML markup and I saw `bgColor_` so I'm wondering why there are two `b`'s in both of y'alls selectors – Sterling Archer Feb 07 '14 at 20:33
Ah, I was focused on the js and kept seeing `\bbgColor`. Didn't mentally ignore the `\b` – helion3 Feb 07 '14 at 20:34
Yeah that confused me too, the OP isn't very clear here – Sterling Archer Feb 07 '14 at 20:41
This makes it work, but I think the "correct" solution is to have better CSS classnames, OP should either get rid of the `_0` altotgether, or if the OP really needs them, add a CSS class `bgcolor` to all the elements. Sounds cleaner than relying on the beginning of a string – Ruan Mendes Feb 07 '14 at 20:45
Agreed, class names are intended to group elements and unique names like these are suited for `id`s – helion3 Feb 07 '14 at 20:46
I think the OP is using this to avoid duplicating the bg color in CSS so he could easily theme it later. So `bgColor_0` is probably used in multiple places. OP should use SASS instead of this hack if possible – Ruan Mendes Feb 07 '14 at 20:48
Ooops, this will only work if there are no other classnames in that list, which is not a good assumption to keep your code maintainable – Ruan Mendes Feb 07 '14 at 20:57
The `*=` will match any occurrence no matter its position in the `class` attribute: http://codepen.io/helion3/pen/jkDLg – helion3 Feb 07 '14 at 21:05
But that will give you false positives, e.g., if you have the `myBgColor` value in there – Ruan Mendes Feb 07 '14 at 21:09
Sure, but I think you're right in that this solution is for a problem that could be solved more efficiently with a better use of classes, etc. This text matching caveat would be as well. – helion3 Feb 07 '14 at 21:12

score 2 · Accepted Answer · edited May 23 '17 at 12:22

2

Try this:

$(this).attr('class').substring(0,7)="bgcolor"

And for getting the attributes of a class I wanna show you this:

Look Here

edited May 23 '17 at 12:22

Community

1
1

answered Feb 07 '14 at 20:32

Hamid Reza

2,913
9
49
76

This is the closest to the answer. But what if there is more than one class given to that element? – George Feb 07 '14 at 20:35
You may use: $(this).hasClass('bgcolor') – Hamid Reza Feb 07 '14 at 20:40
I was wrong and have made this the 'correct' answer for my needs... not for the initial comment but for the link 'Look Here' which turns out to be what I need. Apparently, you need to traverse the stylesheets to get the properties of a selector that is not currently active... I did not realise this. So the function in that link does the job. Also, the overhead is surprisingly low. Thanks! – jchwebdev Feb 07 '14 at 23:41
@jchwebdev Please take some extra time to formulate your question. You had everybody guessing as to what your real question was and even you changed your mind about what your question was. Your real question was, "How can I know what styles are associated with a CSS class?" – Ruan Mendes Feb 08 '14 at 01:10
Edited. Unfortunately, this was one of those things where I didn't really know how to formulate the question well until the answer became more obvious. Thanks for your help. – jchwebdev Feb 08 '14 at 05:09

Ruan Mendes · Answer 3 · 2014-02-07T21:06:04.867

1

I think people are answering the wrong question. I think your question was

"How do I get the background-color property of bgColor_0?" but it should have been "How do I get the background-color property of links that have a css class starting with bgColor?"

http://jsfiddle.net/mendesjuan/j4q56/

jQuery('a').click( function(){ 
   var $link = jQuery(this);
   var isMatch = $link.attr('class').match(/\bbgColor_\S+/g); 
   if (isMatch) {
       console.log($link.css('background-color'));
   }    
} );

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match and http://api.jquery.com/css/

Note that this pattern of bgColor_0 bgColor_1 seems like an anti pattern and is code smell.

edited Feb 07 '14 at 21:06

answered Feb 07 '14 at 20:55

Ruan Mendes

90,375
31
153
217

You are correct. Everyone has been focusing on the regex part of it--obviously I wasn't clear enough. Basically I'm using the class of the link to modify a class on another page element. (When you click on a link it changes the bgcolor of the div by adding a class.) I must've been having a senior moment. All I needed to do was to capture the class and then use $link.css('background-color') DUUUUH. Thanks for helping me snap out of my haze. – jchwebdev Feb 07 '14 at 21:58

score 0 · Answer 4 · answered Feb 07 '14 at 21:07

0

You mean like this?

jQuery('a').click( function(){ 
    alert( $(this).css('background-color') );
} );

answered Feb 07 '14 at 21:07

blurfus

13,485
8
55
61

jquery how to parse class or attributes of object

4 Answers4