jquery: extract value from $(this)

Question

Possible Duplicate:
Javascript / Jquery - Get number from string

Using

var id = $(this).attr("class");

I get all the classes of the clicked link, var id returns 4 classes:

button_red 501 ajax-call class2

How do I extract the class '501' and put it in an var like var id_numeric = 501 ?

Thanks for your advice

Can't help wondering why do you need to use classes to store what looks like semantic data. — raina77ow, Jan 31 '13 at 20:58
usually I would store it in the ID, in this case the ID is already taken by something else (drupal ajax link). I understand you're wondering ;) — Maarten Hartman, Jan 31 '13 at 21:00
This is an [XY problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). — zzzzBov, Jan 31 '13 at 21:14

score 3 · Answer 1 · answered Jan 31 '13 at 21:04

3

Assuming you are using an HTML5 doctype, you could probably use a data- attribute rather than a CSS class. For example:

data-id="501"

Then either

var id = $(this).attr("data-id");

or

var id = $(this).data("id"); //[1]

would work.

Reference:

[1] http://tutorialzine.com/2010/11/jquery-data-method/

answered Jan 31 '13 at 21:04

Tieson T.

20,774
6
77
92

This is the right tool for the job. – zzzzBov Jan 31 '13 at 21:09
2

data attributes have been around for awhile actually http://caniuse.com/dataset – wirey00 Jan 31 '13 at 21:11
@wirey, data attributes have been *supported* for a while, but they weren't standardized until the HTML5 spec, which would require the HTML5 doctype. – zzzzBov Jan 31 '13 at 21:12
Thanks to you too Tieson, I will remember this for the future. I'm using drupal 7 ajax links, therefore I can't use it yet (done some googling) – Maarten Hartman Jan 31 '13 at 21:20

score 2 · Accepted Answer · answered Jan 31 '13 at 20:57

2

var numericClassIdMatches = $(this).attr('class').match(/\b\d+\b/);

In the above case, 501 would be numericClassIdMatches[0]

answered Jan 31 '13 at 20:57

Explosion Pills

188,624
52
326
405

thanks a lot, it worked! will accept your answer as soon as I can – Maarten Hartman Jan 31 '13 at 20:59
btw, if you want, can you exlain the (/\b\d+\b/) part? I don't see any logic in it – Maarten Hartman Jan 31 '13 at 21:04
@MaartenHartman http://www.regular-expressions.info/reference.html – Tieson T. Jan 31 '13 at 21:06
I am downvoting this not because it doesn't work, but because it's perpetuating a poor design decision, which is to put semantic data in a `class` attribute, rather than storing it in a more accessible format, such as [`[data-*]`](http://www.w3.org/html/wg/drafts/html/master/single-page.html#embedding-custom-non-visible-data-with-the-data-*-attributes) attributes. – zzzzBov Jan 31 '13 at 21:11
@zzzzBov thank you for at least explaining – Explosion Pills Jan 31 '13 at 21:13
It should also be noted that classes cannot start with numbers. `501` would not be considered a valid class name. http://stackoverflow.com/questions/4089006/can-xhtml-and-html-class-attributes-value-start-with-a-number – Axel Jan 31 '13 at 21:15
@zzzzBov I appreciate your comment. I'm not sure I can do what you suggest with drupal ajax links.. – Maarten Hartman Jan 31 '13 at 21:16
As @zzzzBov mentioned, you should not be using classes to store data values. – Axel Jan 31 '13 at 21:16
1

@Axel the class name restriction you are referencing does not exist in the current HTML spec – Explosion Pills Jan 31 '13 at 21:19
just for extra knowledge: what is the real argument to not put data in classes? – Maarten Hartman Jan 31 '13 at 21:21
1

@MaartenHartman because look at how relatively complex it was to get the ID data you were looking for! `$(this).attr('class').match(/\b\d+\b/)[0];` vs. `$(this).data('id')`. Also, classes may be manipulated by other means (`$(this).removeClass()` will remove the ID class as well as the styling classes) – Explosion Pills Jan 31 '13 at 21:26

jquery: extract value from $(this)

2 Answers2