WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Get Class List of an Element with jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery attr() Method

You can simply use the attr() method to get the class list i.e. list of all the classes that are assigned to an element using jQuery. The class names are space separated.

Let's take a look at the following example to understand how it actually works:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery Get Class List for Element</title>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script>
  • $(document).ready(function(){
  •     $("button").click(function(){
  •         // Get class list string
  •         var classList = $("#myDiv").attr("class");
  •         
  •         // Creating class array by splitting class list string
  •         var classArr = classList.split(/\s+/);
  •         
  •         $.each(classArr, function(index, value){
  •             $("body").append("<p>" + index + ": " + value + "</p>");
  •         });
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <div id="myDiv" class="foo bar bazz">
  •         <p>This is a paragraph inside DIV element</p>
  •     </div>
  •     <button type="button">Get Div Class List</button>
  • </body>
  • </html>

Alternatively, you can also get the class list in JavaScript using the DOM element's classList property like document.getElementById("myDiv").classList;

Let's try out the following example to understand how it basically works:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>JavaScript Get List of Classes from an Element</title>
  • <script>
  • function getClasses(){
  •     var classList = document.getElementById("myDiv").classList;
  •     
  •     for(var i = 0; i < classList.length; i++){
  •         document.body.insertAdjacentHTML("beforeend", "<p>" + classList[i] + "</p>");
  •     }
  • }
  • </script>
  • </head>
  • <body>
  •     <div id="myDiv" class="foo bar bazz">
  •         <p>This is a paragraph inside DIV element</p>
  •     </div>
  •     <button type="button" onclick="getClasses();">Get Div Class List</button>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements
Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.