How to get class name dynamically from element on jQuery?

Question

Is there a way to get the value of the classname like using an index or array? I have this code:

<input class="wpsc-buy-now-button wpsc-buy-now-button-64" type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif" alt="PayPal - The safer, easier way to pay online">

I want to get the wpsc-buy-now-button-64 dynamically. I don't want to use $(".wpsc-buy-button-64"), because my plan is to put it on a variable like so

var $classOfBtn = wpsc-buy-now-button-64;

64 is an id that I need to compare with another value in a foreach. This changes depending on content.

I think you're looking for a string literal: `var $classOfBtn = 'wpsc-buy-now-button-64';` — Matt Ball, Dec 11 '13 at 05:48
You can get the list of class names form the element if that is what you are asking about. — Felix Kling, Dec 11 '13 at 05:50

score 2 · Answer 1 · answered Dec 11 '13 at 05:59

If you want to read the class of the input give it an id and then use -

var className = $('#id').attr('class');

and if you want to make the selector using class, you can store the class name to some variable as you have mentioned-

var $classOfBtn = wpsc-buy-now-button-64;

and then use it like this -

$('.'+$classOfBtn)

Ganesh Jadhav · Accepted Answer · 2013-12-11T06:49:45.993

1

HTML:
Give an ID to the control.

<input id="btn" class="wpsc-buy-now-button wpsc-buy-now-button-64" type="image"
    name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_buynow_LG.gif"
    alt="PayPal - The safer, easier way to pay online" />

Javascript:

$(document).ready(function () {
    var $classOfBtn = $('#btn').attr('class').split(' ')[0] + '-64';
    alert($classOfBtn );
});

EDIT:
Provided your control has the name submit, you can do this:

$(document).ready(function () {
    var $allClasses = $("[name='submit']").attr('class').split(' ');
    for(var i=0; i < $allClasses.length; i++)
    {
        // Check $allClasses[i] here.
    }
});

Please see this working fiddle for my example: http://jsfiddle.net/jwyF8/

edited Dec 11 '13 at 06:49

answered Dec 11 '13 at 05:55

Ganesh Jadhav

2,830
1
20
32

The 64 is meant to be unknown. I should not define it. What I want is to get all classes and look for that class and pass it to a variable. – ralph Dec 11 '13 at 06:07
Look for which class? You will get all the classes in an array using `$('#btn').attr('class').split(' ')`. – Ganesh Jadhav Dec 11 '13 at 06:11
Yes. I think that's what I need. I want to get all the classes then find the certain class from there. :) – ralph Dec 11 '13 at 06:17
Apparently, the element I want to call has no id and just a group of classes. Also, I tried to use alert($allClasses[i]), but it did not run. – ralph Dec 11 '13 at 06:28
Please see I have updated again. What so you mean by **did not run**? – Ganesh Jadhav Dec 11 '13 at 06:32
It did not show an alert message, which means the script is not running correctly. I tried a simple alert message without the functions, and it run the test message. – ralph Dec 11 '13 at 06:38
What error are you getting in your browser's Javascript console? – Ganesh Jadhav Dec 11 '13 at 06:46
Uncaught TypeError: Property '$' of object [object Object] is not a function local.givagif.com/:644 (anonymous function) – ralph Dec 11 '13 at 06:49
Have you included JQuery in your code? – Ganesh Jadhav Dec 11 '13 at 06:50
Yes. This is the whole snippet, just add the alert function inside it: $(document).ready(function () { var $allClasses = $("[name='submit']").attr('class').split(' '); for(var i=0; i < $allClasses.length; i++) { // Check $allClasses[i] here. alert($allClasses[i]); } }); – ralph Dec 11 '13 at 06:52
I meant, have you included the **JQuery Library** in your HTML? A file with name something like 'jquery-1.10.2.min.js' or a url to the online library? – Ganesh Jadhav Dec 11 '13 at 06:54
I believe so. Also, I am running this in a Wordpress template file. – ralph Dec 11 '13 at 06:58

score 0 · Answer 3 · edited May 23 '17 at 12:02

0

Assuming that this is what you would have;

var $classOfBtn = 'wpsc-buy-now-button-64';

this would work just fine:

$('.' + $classOfBtn) //note the dot

Update:

if you do indeed want to get all classes you'd have to assign some other mean of identifying your input, so that it can be retrieved and "asked" for its classes list.

See here.

edited May 23 '17 at 12:02

Community

1
1

answered Dec 11 '13 at 05:50

ZenMaster

12,363
5
36
59

score 0 · Answer 4 · edited May 23 '17 at 10:25

0

Substitute the string for a literal, and follow the instructions here:

Get class name using jQuery

It would also be helpful if you could describe what you mean by getting the button dynamically?

edited May 23 '17 at 10:25

Community

1
1

answered Dec 11 '13 at 05:51

Edward Lombe

11
4

score 0 · Answer 5 · answered Dec 11 '13 at 06:18

0

You can put all of classes in array like this:

var classArray = $('input').attr('class').split(' ');
// So now you can declare variables
var classbtn1 = classArray[0];
var classbtn2 = classArray[1];

answered Dec 11 '13 at 06:18

Ringo

3,795
3
22
37

How to get class name dynamically from element on jQuery?

5 Answers5