.addClass()

jQuery

previous page next page

.addClass()

Categories: Attributes | Manipulation > Class Attribute | CSS

.addClass( className ) Returns: jQuery

Description: Adds the specified class(es) to each of the set of matched elements.

  • version added: 1.0.addClass( className )

    • className
      Type: String
      One or more space-separated classes to be added to the class attribute of each matched element.

  • version added: 1.4.addClass( function(index, currentClass) )

    • function(index, currentClass)
      Type: Function()
      A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.

It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

More than one class may be added at a time, separated by a space, to the set of matched elements, like so:

1
 
                                

                                  

                                    $("p").addClass("myClass yourClass");

This method is often used with .removeClass() to switch elements' classes from one to another, like so:

1
 
                                

                                  

                                    $("p").removeClass("myClass noClass").addClass("yourClass");

Here, the myClass and noClass classes are removed from all paragraphs, while yourClass is added.

As of jQuery 1.4, the .addClass() method's argument can receive a function.

1
2
3
 
                                

                                  

                                    $("ul li:last").addClass(function(index) {
                                  

                                

                                

                                  

                                      return "item-" + index;
                                  

                                

                                

                                  

                                    });

Given an unordered list with five <li> elements, this example adds the class "item-4" to the last <li>.

Examples:

Example: Add the class "selected" to the matched elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        p { margin: 8px; font-size:16px; }
                                    

                                  

                                  

                                    

                                        .selected { color:blue; }
                                    

                                  

                                  

                                    

                                        .highlight { background:yellow; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        <p>Hello</p>
                                    

                                  

                                  

                                    

                                        <p>and</p>
                                    

                                  

                                  

                                    

                                        <p>Goodbye</p>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                        $("p").last().addClass("selected");
                                    

                                  

                                  

                                    

                                        </script>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Add the classes "selected" and "highlight" to the matched elements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        p { margin: 8px; font-size:16px; }
                                    

                                  

                                  

                                    

                                        .selected { color:red; }
                                    

                                  

                                  

                                    

                                        .highlight { background:yellow; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <p>Hello</p>
                                    

                                  

                                  

                                    

                                        <p>and</p>
                                    

                                  

                                  

                                    

                                        <p>Goodbye</p>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                        $("p:last").addClass("selected highlight");
                                    

                                  

                                  

                                    

                                        </script>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Pass in a function to .addClass() to add the "green" class to a div that already has a "red" class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        div { background: white; }
                                    

                                  

                                  

                                    

                                        .red { background: red; }
                                    

                                  

                                  

                                    

                                        .red.green { background: green; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                       <div>This div should be white</div>
                                    

                                  

                                  

                                    

                                       <div class="red">This div will be green because it now has the "green" and "red" classes.
                                    

                                  

                                  

                                    

                                         It would be red if the addClass function failed.</div>
                                    

                                  

                                  

                                    

                                       <div>This div should be white</div>
                                    

                                  

                                  

                                    

                                       <p>There are zero green divs</p>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                        $("div").addClass(function(index, currentClass) {
                                    

                                  

                                  

                                    

                                          var addedClass;
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                          if ( currentClass === "red" ) {
                                    

                                  

                                  

                                    

                                            addedClass = "green";
                                    

                                  

                                  

                                    

                                            $("p").text("There is one green div");
                                    

                                  

                                  

                                    

                                          }
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                          return addedClass;
                                    

                                  

                                  

                                    

                                        });
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page