The below code snippet explains how to get list of classes when multiple class names have been specified for an HTML control.
<div class = "myClass1 myClass2 myClass3" id = "myDiv"></div>
<input type="button" id="demo" value = "Demo" />
<script type = "text/javascript" src = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$("#demo").live("click", function () {
//Get list of CSS class names
var classNames = $("#myDiv").attr("class").toString().split(' ');
$.each(classNames, function (i, className) {
alert(className);
});
});
</script>
Explanation:
In the above sample, a click event handler has been attached to the HTML button with id “demo”. When the button is clicked the name of the class is fetched using the attr("class") method of jQuery. Then the class names are split using the JavaScript split function using space as the delimiter to get and string array of class names. Then a jQuery each loop is used to iterate through the array of the class names and display each class name in alert.