How do I access the list of classnames using javascript/jQuery?

Question

here are the html elements :

<input class="myClass problemOne" type=text value=something></input>
<input class="myClass problemTwo" type=text value=somethingelse></input>

and here is the javascript and jquery in which I am tryign to access classaname, neither method a, or b works ... "classname is null or not an object".

var myElems = $(this).find(".myClass");

myElems.each(function(index) {
   var classLista = $(this).className.split(/\s+/);
   var classListb = myElems[index].className.split(/\s+/);
   var classListc = this.className.split(/\s+/);

   categories[index].key = classlist[1]; 
   categories[index].value = $(this).value();   
});

The end goal is to have problemOne and problemTwo returned as string and then stored in an array, which then go to the database blah blah blah.

Thanks a lot for any input !

edit explained end goal

do you want the list of class names for one element? i.e. "myclass" and "problem" or the list of classes for all elements? — Bobby Borszich
– Bobby Borszich, Commented Sep 29, 2010 at 11:46
a lsit of classnames for each element. There are only two, but the second can vary, shown in my edit. — NimChimpsky
– NimChimpsky, Commented Sep 29, 2010 at 11:49

Stephen · Accepted Answer · 2010-09-29 12:01:51Z

7

You can use jQuery's .attr() method to get any attribute, including classes.

$(this).find('.myClass').each(function(index) {
    var element = $(this), classList;
    classList = element.attr('class').split(/\s+/);

    categories[index] = {
        key : classList[1],
        value : element.value()
    }
});

Aside:
if categories[index] already contains other info, you could use $.extend()

$.extend(categories[index], {
    key : classList[1],
    value : element.value()
});

edited Sep 29, 2010 at 12:01

answered Sep 29, 2010 at 11:46

Stephen

19k10 gold badges62 silver badges98 bronze badges

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

1 Comment

Jess Jacobs Over a year ago

while this does achieve the goal, it doesn't answer the larger question of why IE7 in particular interprets $().eq(x)[y].classList[n] as .classList.n; furthermore, why classList is undefined in IE(7). Clearly .1, .2, etc, are insufficient object names. Why do jQuery objects have this property built into them if it appears it cannot be accessed in IE7? (at least - i explored this in Chrome and IE7 only.) In fact, $().eq(x)[y].classList comes up after a type check as "undefined", in IE7, but is a normal object in Chrome. Any ideas?

Felix Kling · Accepted Answer · 2010-09-29 11:46:09Z

3

The property is called className. This is a property of a DOM element, not a jQuery element, so this.className should work.

answered Sep 29, 2010 at 11:46

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

Hannes · Accepted Answer · 2010-09-29 11:56:32Z

1

Just use the attr method and split:

<html>
<body>
<input class="myClass problem" type=text value=something></input>
<input class="myClass problem" type=text value=somethingelse></input>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
   //<!--
    $(document).ready(function(){
        var Classes = $('input').attr('class').split(' ');
        alert(Classes[0] + ' - '+  Classes[1]);
    });
    //-->
</script>
</body>
</html>

answered Sep 29, 2010 at 11:56

Hannes

8,2775 gold badges35 silver badges51 bronze badges

Comments

AutoSponge · Accepted Answer · 2010-09-29 13:43:22Z

0

in POJ:

var elms = document.getElementsByTagName("INPUT"), 
    i = elms.length,
    arr = [],
    classArray;

while(i--) {
    classArray = elms[i].className.split(/\s+/);
    if (classArray.length > 1) {
        arr.push(classArray[1]);
    }
}
alert(arr.join(','));

answered Sep 29, 2010 at 13:43

AutoSponge

1,45210 silver badges7 bronze badges

2 Comments

Stephen Over a year ago

your second declared variable i will throw an error because elms is not yet defined.

AutoSponge Over a year ago

I think you should try it first. It is declared because "," separates variables--it's a single var statement defining each variable in the list.

Collectives™ on Stack Overflow

How do I access the list of classnames using javascript/jQuery?

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related