🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 53 (from laksa014)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa053.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://api.jquery.com/addClass/\')), getAhrefsUnparsedNoserviceFromURL(\'https://api.jquery.com/addClass/\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/api.jquery.com\/addClass\/","crawl_time":1776335423,"first_indexed_time":1376659593,"http_code":200,"src_unparsed":"com,jquery!api,\/addClass\/ s443","src_root_hash":"657907979407719853","history_drop_reason":null,"meta_title":".addClass() | jQuery API Documentation","meta_descriptions":[""],"attrs_boilerpipe_text":".addClass( className )\nReturns:\njQuery\nDescription:\nAdds the specified class(es) to each element in the set of matched elements.\nversion added:\n1.0\n.addClass( className )\nclassName\nOne or more space-separated classes to be added to the class attribute of each matched element.\nversion added:\n3.3\n.addClass( classNames )\nclassNames\nAn array of classes to be added to the class attribute of each matched element.\nversion added:\n1.4\n.addClass( function )\nfunction\nA 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,\nthis\nrefers to the current element in the set.\nversion added:\n3.3\n.addClass( function )\nfunction\nA function returning one or more space-separated class names or an array of 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,\nthis\nrefers to the current element in the set.\nIt'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.\nBefore jQuery version 1.12\/2.2, the\n.addClass()\nmethod manipulated the\nclassName\nproperty\nof the selected elements, not the\nclass\nattribute\n. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).\nAs of jQuery 1.12\/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the\nclass\nattribute\nis used instead. So,\n.addClass()\ncan be used on XML or SVG documents.\nMore than one class may be added at a time, separated by a space, to the set of matched elements, like so:\n1\n$(\n\"p\"\n).addClass(\n\"myClass yourClass\"\n);\nThis method is often used with\n.removeClass()\nto switch elements' classes from one to another, like so:\n1\n$(\n\"p\"\n).removeClass(\n\"myClass noClass\"\n).addClass(\n\"yourClass\"\n);\nHere, the\nmyClass\nand\nnoClass\nclasses are removed from all paragraphs, while\nyourClass\nis added.\nAs of jQuery 1.4, the\n.addClass()\nmethod's argument can receive a function.\n1\n2\n3\n$(\n\"ul li\"\n).addClass(\nfunction\n(\nindex\n)\n{\nreturn\n\"item-\"\n+ index;\n});\nGiven an unordered list with two\n<li>\nelements, this example adds the class \"item-0\" to the first\n<li>\nand \"item-1\" to the second.\nExamples:\nExample 1\nAdd the class \"selected\" to the matched elements.\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n<!doctype\nhtml\n>\n<\nhtml\nlang\n=\n\"en\"\n>\n<\nhead\n>\n<\nmeta\ncharset\n=\n\"utf-8\"\n>\n<\ntitle\n>\naddClass demo\n<\/\ntitle\n>\n<\nstyle\n>\np\n{\nmargin\n:\n8px\n;\nfont-size\n:\n16px\n;\n}\n.selected\n{\ncolor\n: blue;\n}\n.highlight\n{\nbackground\n: yellow;\n}\n<\/\nstyle\n>\n<\nscript\nsrc\n=\n\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"\n>\n<\/\nscript\n>\n<\/\nhead\n>\n<\nbody\n>\n<\np\n>\nHello\n<\/\np\n>\n<\np\n>\nand\n<\/\np\n>\n<\np\n>\nGoodbye\n<\/\np\n>\n<\nscript\n>\n$(\n\"p\"\n).last().addClass(\n\"selected\"\n);\n<\/\nscript\n>\n<\/\nbody\n>\n<\/\nhtml\n>\nDemo:\nExample 2\nAdd the classes \"selected\" and \"highlight\" to the matched elements.\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n<!doctype\nhtml\n>\n<\nhtml\nlang\n=\n\"en\"\n>\n<\nhead\n>\n<\nmeta\ncharset\n=\n\"utf-8\"\n>\n<\ntitle\n>\naddClass demo\n<\/\ntitle\n>\n<\nstyle\n>\np\n{\nmargin\n:\n8px\n;\nfont-size\n:\n16px\n;\n}\n.selected\n{\ncolor\n: red;\n}\n.highlight\n{\nbackground\n: yellow;\n}\n<\/\nstyle\n>\n<\nscript\nsrc\n=\n\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"\n>\n<\/\nscript\n>\n<\/\nhead\n>\n<\nbody\n>\n<\np\n>\nHello\n<\/\np\n>\n<\np\n>\nand\n<\/\np\n>\n<\np\n>\nGoodbye\n<\/\np\n>\n<\nscript\n>\n$(\n\"p\"\n).last().addClass(\n\"selected highlight\"\n);\n<\/\nscript\n>\n<\/\nbody\n>\n<\/\nhtml\n>\nDemo:\nExample 3\nAdd the classes \"selected\" and \"highlight\" to the matched elements (3.3+ syntax).\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n<!doctype\nhtml\n>\n<\nhtml\nlang\n=\n\"en\"\n>\n<\nhead\n>\n<\nmeta\ncharset\n=\n\"utf-8\"\n>\n<\ntitle\n>\naddClass demo\n<\/\ntitle\n>\n<\nstyle\n>\np\n{\nmargin\n:\n8px\n;\nfont-size\n:\n16px\n;\n}\n.selected\n{\ncolor\n: red;\n}\n.highlight\n{\nbackground\n: yellow;\n}\n<\/\nstyle\n>\n<\nscript\nsrc\n=\n\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"\n>\n<\/\nscript\n>\n<\/\nhead\n>\n<\nbody\n>\n<\np\n>\nHello\n<\/\np\n>\n<\np\n>\nand\n<\/\np\n>\n<\np\n>\nGoodbye\n<\/\np\n>\n<\nscript\n>\n$(\n\"p\"\n).last().addClass( [\n\"selected\"\n,\n\"highlight\"\n] );\n<\/\nscript\n>\n<\/\nbody\n>\n<\/\nhtml\n>\nDemo:\nExample 4\nPass in a function to\n.addClass()\nto add the \"green\" class to a div that already has a \"red\" class.\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36\n37\n38\n39\n40\n41\n<!doctype\nhtml\n>\n<\nhtml\nlang\n=\n\"en\"\n>\n<\nhead\n>\n<\nmeta\ncharset\n=\n\"utf-8\"\n>\n<\ntitle\n>\naddClass demo\n<\/\ntitle\n>\n<\nstyle\n>\ndiv\n{\nbackground\n: white;\n}\n.red\n{\nbackground\n: red;\n}\n.red\n.green\n{\nbackground\n: green;\n}\n<\/\nstyle\n>\n<\nscript\nsrc\n=\n\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"\n>\n<\/\nscript\n>\n<\/\nhead\n>\n<\nbody\n>\n<\ndiv\n>\nThis div should be white\n<\/\ndiv\n>\n<\ndiv\nclass\n=\n\"red\"\n>\nThis div will be green because it now has the \"green\" and \"red\" classes.\nIt would be red if the addClass function failed.\n<\/\ndiv\n>\n<\ndiv\n>\nThis div should be white\n<\/\ndiv\n>\n<\np\n>\nThere are zero green divs\n<\/\np\n>\n<\nscript\n>\n$(\n\"div\"\n).addClass(\nfunction\n(\nindex, currentClass\n)\n{\nvar\naddedClass;\nif\n( currentClass ===\n\"red\"\n) {\naddedClass =\n\"green\"\n;\n$(\n\"p\"\n).text(\n\"There is one green div\"\n);\n}\nreturn\naddedClass;\n});\n<\/\nscript\n>\n<\/\nbody\n>\n<\/\nhtml\n>\nDemo:","attrs_markdown":"- [jQuery](https:\/\/jquery.com\/ \"jQuery\")\n- [jQuery UI](https:\/\/jqueryui.com\/ \"jQuery UI\")\n- [jQuery Mobile](https:\/\/jquerymobile.com\/ \"jQuery Mobile\")\n- [Sizzle](https:\/\/sizzlejs.com\/ \"Sizzle\")\n- [QUnit](https:\/\/qunitjs.com\/ \"QUnit\")\n\n- [Plugins](https:\/\/plugins.jquery.com\/)\n- [Contribute](https:\/\/contribute.jquery.org\/)\n  - [CLA](https:\/\/cla.openjsf.org\/)\n  - [Style Guides](https:\/\/contribute.jquery.org\/style-guide\/)\n  - [Bug Triage](https:\/\/contribute.jquery.org\/triage\/)\n  - [Code](https:\/\/contribute.jquery.org\/code\/)\n  - [Documentation](https:\/\/contribute.jquery.org\/documentation\/)\n  - [Web Sites](https:\/\/contribute.jquery.org\/web-sites\/)\n- [Events](https:\/\/events.jquery.org\/)\n- [Support](https:\/\/jquery.com\/support\/)\n  - [Learning Center](https:\/\/learn.jquery.com\/)\n  - [Chat](https:\/\/jquery.com\/support\/)\n  - [Stack Overflow](https:\/\/stackoverflow.com\/tags\/jquery\/info)\n  - [Report a bug](https:\/\/contribute.jquery.org\/bug-reports\/)\n- [OpenJS Foundation](https:\/\/openjsf.org\/)\n  - [Join](https:\/\/openjsf.org\/join)\n  - [Members](https:\/\/openjsf.org\/members)\n  - [jQuery Team](https:\/\/jquery.com\/team)\n  - [Governance](https:\/\/openjsf.org\/governance)\n  - [Conduct](https:\/\/code-of-conduct.openjsf.org\/)\n  - [Projects](https:\/\/openjsf.org\/projects)\n\n## [jQuery API Documentation](https:\/\/jquery.com\/ \"jQuery API Documentation\")\nNavigation\n\n- [Download](https:\/\/jquery.com\/download\/)\n- [API Documentation](https:\/\/api.jquery.com\/)\n- [Blog](https:\/\/blog.jquery.com\/)\n- [Plugins](https:\/\/plugins.jquery.com\/)\n- [Browser Support](https:\/\/jquery.com\/browser-support\/)\n- [Version Support](https:\/\/jquery.com\/support\/)\n\n# .addClass()\n***\nCategories: [Attributes](https:\/\/api.jquery.com\/category\/attributes\/) \\| [Manipulation](https:\/\/api.jquery.com\/category\/manipulation\/) \\> [Class Attribute](https:\/\/api.jquery.com\/category\/manipulation\/class-attribute\/) \\| [CSS](https:\/\/api.jquery.com\/category\/css\/)\n\n## .addClass( className )Returns: [jQuery](http:\/\/api.jquery.com\/Types\/#jQuery)\n**Description:** Adds the specified class(es) to each element in the set of matched elements.\n\n- #### version added: [1\\.0](https:\/\/api.jquery.com\/category\/version\/1.0\/)[.addClass( className )](https:\/\/api.jquery.com\/addClass\/#addClass-className)\n  - **className**\n    Type: [String](http:\/\/api.jquery.com\/Types\/#String)\n    One or more space-separated classes to be added to the class attribute of each matched element.\n- #### version added: [3\\.3](https:\/\/api.jquery.com\/category\/version\/3.3\/)[.addClass( classNames )](https:\/\/api.jquery.com\/addClass\/#addClass-classNames)\n  - **classNames**\n    Type: [Array](http:\/\/api.jquery.com\/Types\/#Array)\n    An array of classes to be added to the class attribute of each matched element.\n- #### version added: [1\\.4](https:\/\/api.jquery.com\/category\/version\/1.4\/)[.addClass( function )](https:\/\/api.jquery.com\/addClass\/#addClass-function)\n  - **function**\n    Type: [Function](http:\/\/api.jquery.com\/Types\/#Function)( [Integer](http:\/\/api.jquery.com\/Types\/#Integer) index, [String](http:\/\/api.jquery.com\/Types\/#String) currentClassName ) =\\> [String](http:\/\/api.jquery.com\/Types\/#String)\n    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.\n- #### version added: [3\\.3](https:\/\/api.jquery.com\/category\/version\/3.3\/)[.addClass( function )](https:\/\/api.jquery.com\/addClass\/#addClass-function)\n  - **function**\n    Type: [Function](http:\/\/api.jquery.com\/Types\/#Function)( [Integer](http:\/\/api.jquery.com\/Types\/#Integer) index, [String](http:\/\/api.jquery.com\/Types\/#String) currentClassName ) =\\> [String](http:\/\/api.jquery.com\/Types\/#String) \\| [Array](http:\/\/api.jquery.com\/Types\/#Array)\n    A function returning one or more space-separated class names or an array of 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.\n\nIt'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.\n\nBefore jQuery version 1.12\/2.2, the `.addClass()` method manipulated the `className` *property* of the selected elements, not the `class` *attribute*. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).\n\nAs of jQuery 1.12\/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the `class` *attribute* is used instead. So, `.addClass()` can be used on XML or SVG documents.\n\nMore than one class may be added at a time, separated by a space, to the set of matched elements, like so:\n\n|   |   |\n|---|---|\n| 1 |   |\n\nThis method is often used with `.removeClass()` to switch elements' classes from one to another, like so:\n\n|   |   |\n|---|---|\n| 1 |   |\n\nHere, the `myClass` and `noClass` classes are removed from all paragraphs, while `yourClass` is added.\n\nAs of jQuery 1.4, the `.addClass()` method's argument can receive a function.\n\n|   |   |\n|---|---|\n| 1 2 3 |   |\n\nGiven an unordered list with two `<li>` elements, this example adds the class \"item-0\" to the first `<li>` and \"item-1\" to the second.\n\n## Examples:\n### Example 1\nAdd the class \"selected\" to the matched elements.\n\n|   |   |\n|---|---|\n| 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 |   |\n#### Demo:\n\n### Example 2\nAdd the classes \"selected\" and \"highlight\" to the matched elements.\n\n|   |   |\n|---|---|\n| 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 |   |\n#### Demo:\n\n### Example 3\nAdd the classes \"selected\" and \"highlight\" to the matched elements (3.3+ syntax).\n\n|   |   |\n|---|---|\n| 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 |   |\n#### Demo:\n\n### Example 4\nPass in a function to `.addClass()` to add the \"green\" class to a div that already has a \"red\" class.\n\n|   |   |\n|---|---|\n| 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 34 35 36 37 38 39 40 41 |   |\n#### Demo:\n\n- [Ajax](https:\/\/api.jquery.com\/category\/ajax\/)\n  - [Global Ajax Event Handlers](https:\/\/api.jquery.com\/category\/ajax\/global-ajax-event-handlers\/)\n  - [Helper Functions](https:\/\/api.jquery.com\/category\/ajax\/helper-functions\/)\n  - [Low-Level Interface](https:\/\/api.jquery.com\/category\/ajax\/low-level-interface\/)\n  - [Shorthand Methods](https:\/\/api.jquery.com\/category\/ajax\/shorthand-methods\/)\n- [Attributes](https:\/\/api.jquery.com\/category\/attributes\/)\n- [Callbacks Object](https:\/\/api.jquery.com\/category\/callbacks-object\/)\n- [Core](https:\/\/api.jquery.com\/category\/core\/)\n- [CSS](https:\/\/api.jquery.com\/category\/css\/)\n- [Data](https:\/\/api.jquery.com\/category\/data\/)\n- [Deferred Object](https:\/\/api.jquery.com\/category\/deferred-object\/)\n- [Deprecated](https:\/\/api.jquery.com\/category\/deprecated\/)\n  - [Deprecated 1.3](https:\/\/api.jquery.com\/category\/deprecated\/deprecated-1.3\/)\n  - [Deprecated 1.7](https:\/\/api.jquery.com\/category\/deprecated\/deprecated-1.7\/)\n  - [Deprecated 1.8](https:\/\/api.jquery.com\/category\/deprecated\/deprecated-1.8\/)\n  - [Deprecated 1.9](https:\/\/api.jquery.com\/category\/deprecated\/deprecated-1.9\/)\n  - [Deprecated 1.10 & 2.0](https:\/\/api.jquery.com\/category\/deprecated\/deprecated-1.10-and-2.0\/)\n  - [Deprecated 3.0](https:\/\/api.jquery.com\/category\/deprecated\/deprecated-3.0\/)\n  - [Deprecated 3.2](https:\/\/api.jquery.com\/category\/deprecated\/deprecated-3.2\/)\n  - [Deprecated 3.3](https:\/\/api.jquery.com\/category\/deprecated\/deprecated-3.3\/)\n  - [Deprecated 3.4](https:\/\/api.jquery.com\/category\/deprecated\/deprecated-3.4\/)\n  - [Deprecated 3.5](https:\/\/api.jquery.com\/category\/deprecated\/deprecated-3.5\/)\n  - [Deprecated 3.7](https:\/\/api.jquery.com\/category\/deprecated\/deprecated-3.7\/)\n- [Dimensions](https:\/\/api.jquery.com\/category\/dimensions\/)\n- [Effects](https:\/\/api.jquery.com\/category\/effects\/)\n  - [Basics](https:\/\/api.jquery.com\/category\/effects\/basics\/)\n  - [Custom](https:\/\/api.jquery.com\/category\/effects\/custom-effects\/)\n  - [Fading](https:\/\/api.jquery.com\/category\/effects\/fading\/)\n  - [Sliding](https:\/\/api.jquery.com\/category\/effects\/sliding\/)\n- [Events](https:\/\/api.jquery.com\/category\/events\/)\n  - [Browser Events](https:\/\/api.jquery.com\/category\/events\/browser-events\/)\n  - [Document Loading](https:\/\/api.jquery.com\/category\/events\/document-loading\/)\n  - [Event Handler Attachment](https:\/\/api.jquery.com\/category\/events\/event-handler-attachment\/)\n  - [Event Object](https:\/\/api.jquery.com\/category\/events\/event-object\/)\n  - [Form Events](https:\/\/api.jquery.com\/category\/events\/form-events\/)\n  - [Keyboard Events](https:\/\/api.jquery.com\/category\/events\/keyboard-events\/)\n  - [Mouse Events](https:\/\/api.jquery.com\/category\/events\/mouse-events\/)\n- [Forms](https:\/\/api.jquery.com\/category\/forms\/)\n- [Internals](https:\/\/api.jquery.com\/category\/internals\/)\n- [Manipulation](https:\/\/api.jquery.com\/category\/manipulation\/)\n  - [Class Attribute](https:\/\/api.jquery.com\/category\/manipulation\/class-attribute\/)\n  - [Copying](https:\/\/api.jquery.com\/category\/manipulation\/copying\/)\n  - [DOM Insertion, Around](https:\/\/api.jquery.com\/category\/manipulation\/dom-insertion-around\/)\n  - [DOM Insertion, Inside](https:\/\/api.jquery.com\/category\/manipulation\/dom-insertion-inside\/)\n  - [DOM Insertion, Outside](https:\/\/api.jquery.com\/category\/manipulation\/dom-insertion-outside\/)\n  - [DOM Removal](https:\/\/api.jquery.com\/category\/manipulation\/dom-removal\/)\n  - [DOM Replacement](https:\/\/api.jquery.com\/category\/manipulation\/dom-replacement\/)\n  - [General Attributes](https:\/\/api.jquery.com\/category\/manipulation\/general-attributes\/)\n  - [Style Properties](https:\/\/api.jquery.com\/category\/manipulation\/style-properties\/)\n- [Miscellaneous](https:\/\/api.jquery.com\/category\/miscellaneous\/)\n  - [Collection Manipulation](https:\/\/api.jquery.com\/category\/miscellaneous\/collection-manipulation\/)\n  - [Data Storage](https:\/\/api.jquery.com\/category\/miscellaneous\/data-storage\/)\n  - [DOM Element Methods](https:\/\/api.jquery.com\/category\/miscellaneous\/dom-element-methods\/)\n  - [Setup Methods](https:\/\/api.jquery.com\/category\/miscellaneous\/setup-methods\/)\n- [Offset](https:\/\/api.jquery.com\/category\/offset\/)\n- [Properties](https:\/\/api.jquery.com\/category\/properties\/)\n  - [Properties of jQuery Object Instances](https:\/\/api.jquery.com\/category\/properties\/jquery-object-instance-properties\/)\n  - [Properties of the Global jQuery Object](https:\/\/api.jquery.com\/category\/properties\/global-jquery-object-properties\/)\n- [Removed](https:\/\/api.jquery.com\/category\/removed\/)\n- [Selectors](https:\/\/api.jquery.com\/category\/selectors\/)\n  - [Attribute](https:\/\/api.jquery.com\/category\/selectors\/attribute-selectors\/)\n  - [Basic](https:\/\/api.jquery.com\/category\/selectors\/basic-css-selectors\/)\n  - [Basic Filter](https:\/\/api.jquery.com\/category\/selectors\/basic-filter-selectors\/)\n  - [Child Filter](https:\/\/api.jquery.com\/category\/selectors\/child-filter-selectors\/)\n  - [Content Filter](https:\/\/api.jquery.com\/category\/selectors\/content-filter-selector\/)\n  - [Form](https:\/\/api.jquery.com\/category\/selectors\/form-selectors\/)\n  - [Hierarchy](https:\/\/api.jquery.com\/category\/selectors\/hierarchy-selectors\/)\n  - [jQuery Extensions](https:\/\/api.jquery.com\/category\/selectors\/jquery-selector-extensions\/)\n  - [Visibility Filter](https:\/\/api.jquery.com\/category\/selectors\/visibility-filter-selectors\/)\n- [Traversing](https:\/\/api.jquery.com\/category\/traversing\/)\n  - [Filtering](https:\/\/api.jquery.com\/category\/traversing\/filtering\/)\n  - [Miscellaneous Traversing](https:\/\/api.jquery.com\/category\/traversing\/miscellaneous-traversal\/)\n  - [Tree Traversal](https:\/\/api.jquery.com\/category\/traversing\/tree-traversal\/)\n- [Utilities](https:\/\/api.jquery.com\/category\/utilities\/)\n- [Version](https:\/\/api.jquery.com\/category\/version\/)\n  - [Version 1.0](https:\/\/api.jquery.com\/category\/version\/1.0\/)\n  - [Version 1.0.4](https:\/\/api.jquery.com\/category\/version\/1.0.4\/)\n  - [Version 1.1](https:\/\/api.jquery.com\/category\/version\/1.1\/)\n  - [Version 1.1.2](https:\/\/api.jquery.com\/category\/version\/1.1.2\/)\n  - [Version 1.1.3](https:\/\/api.jquery.com\/category\/version\/1.1.3\/)\n  - [Version 1.1.4](https:\/\/api.jquery.com\/category\/version\/1.1.4\/)\n  - [Version 1.2](https:\/\/api.jquery.com\/category\/version\/1.2\/)\n  - [Version 1.2.3](https:\/\/api.jquery.com\/category\/version\/1.2.3\/)\n  - [Version 1.2.6](https:\/\/api.jquery.com\/category\/version\/1.2.6\/)\n  - [Version 1.3](https:\/\/api.jquery.com\/category\/version\/1.3\/)\n  - [Version 1.4](https:\/\/api.jquery.com\/category\/version\/1.4\/)\n  - [Version 1.4.1](https:\/\/api.jquery.com\/category\/version\/1.4.1\/)\n  - [Version 1.4.2](https:\/\/api.jquery.com\/category\/version\/1.4.2\/)\n  - [Version 1.4.3](https:\/\/api.jquery.com\/category\/version\/1.4.3\/)\n  - [Version 1.4.4](https:\/\/api.jquery.com\/category\/version\/1.4.4\/)\n  - [Version 1.5](https:\/\/api.jquery.com\/category\/version\/1.5\/)\n  - [Version 1.5.1](https:\/\/api.jquery.com\/category\/version\/1.5.1\/)\n  - [Version 1.6](https:\/\/api.jquery.com\/category\/version\/1.6\/)\n  - [Version 1.7](https:\/\/api.jquery.com\/category\/version\/1.7\/)\n  - [Version 1.8](https:\/\/api.jquery.com\/category\/version\/1.8\/)\n  - [Version 1.9](https:\/\/api.jquery.com\/category\/version\/1.9\/)\n  - [Version 1.11 & 2.1](https:\/\/api.jquery.com\/category\/version\/1.11-and-2.1\/)\n  - [Version 1.12 & 2.2](https:\/\/api.jquery.com\/category\/version\/1.12-and-2.2\/)\n  - [Version 3.0](https:\/\/api.jquery.com\/category\/version\/3.0\/)\n  - [Version 3.1](https:\/\/api.jquery.com\/category\/version\/3.1\/)\n  - [Version 3.2](https:\/\/api.jquery.com\/category\/version\/3.2\/)\n  - [Version 3.3](https:\/\/api.jquery.com\/category\/version\/3.3\/)\n  - [Version 3.4](https:\/\/api.jquery.com\/category\/version\/3.4\/)\n  - [Version 3.5](https:\/\/api.jquery.com\/category\/version\/3.5\/)\n  - [Version 3.6](https:\/\/api.jquery.com\/category\/version\/3.6\/)\n  - [Version 3.7](https:\/\/api.jquery.com\/category\/version\/3.7\/)\n  - [Version 4.0](https:\/\/api.jquery.com\/category\/version\/4.0\/)\n\n### Books\n- [![Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer](https:\/\/api.jquery.com\/wp-content\/themes\/jquery\/content\/books\/learning-jquery-4th-ed.jpg) Learning jQuery Fourth Edition Karl Swedberg and Jonathan Chaffer](https:\/\/www.packtpub.com\/en-us\/product\/learning-jquery-fourth-edition-9781782163152)\n- [![jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa](https:\/\/api.jquery.com\/wp-content\/themes\/jquery\/content\/books\/jquery-in-action.jpg) jQuery in Action Bear Bibeault, Yehuda Katz, and Aurelio De Rosa](https:\/\/www.manning.com\/books\/jquery-in-action-third-edition)\n- [![jQuery Succinctly by Cody Lindley](https:\/\/api.jquery.com\/wp-content\/themes\/jquery\/content\/books\/jquery-succinctly.jpg) jQuery Succinctly Cody Lindley](https:\/\/www.syncfusion.com\/ebooks\/jquery)\n\n- [Learning Center](https:\/\/learn.jquery.com\/)\n- [Chat](https:\/\/jquery.com\/support\/)\n- [Twitter](https:\/\/twitter.com\/jquery)\n- [GitHub](https:\/\/github.com\/jquery)\n\nCopyright 2026 [OpenJS Foundation](https:\/\/openjsf.org\/) and jQuery contributors. All rights reserved. See [jQuery License](https:\/\/jquery.com\/license\/) for more information. The [OpenJS Foundation](https:\/\/openjsf.org\/) has registered trademarks and uses trademarks. For a list of trademarks of the [OpenJS Foundation](https:\/\/openjsf.org\/), please see our [Trademark Policy](https:\/\/trademark-policy.openjsf.org\/) and [Trademark List](https:\/\/trademark-list.openjsf.org\/). Trademarks and logos not indicated on the [list of OpenJS Foundation trademarks](https:\/\/trademark-list.openjsf.org\/) are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation [Terms of Use](https:\/\/terms-of-use.openjsf.org\/), [Privacy](https:\/\/privacy-policy.openjsf.org\/), [Code of Conduct](https:\/\/code-of-conduct.openjsf.org\/), and [Cookie](https:\/\/www.linuxfoundation.org\/cookies) Policies also apply.\n\n[Web hosting by Digital Ocean](https:\/\/www.digitalocean.com\/) \\| [CDN by Fastly](https:\/\/www.fastly.com\/) \\| [Powered by WordPress](https:\/\/wordpress.org\/)","attrs_readable_markdown":"## .addClass( className )Returns: [jQuery](http:\/\/api.jquery.com\/Types\/#jQuery)\n**Description:** Adds the specified class(es) to each element in the set of matched elements.\n\n- #### version added: [1\\.0](https:\/\/api.jquery.com\/category\/version\/1.0\/)[.addClass( className )](https:\/\/api.jquery.com\/addClass\/#addClass-className)\n  - **className**\n    One or more space-separated classes to be added to the class attribute of each matched element.\n- #### version added: [3\\.3](https:\/\/api.jquery.com\/category\/version\/3.3\/)[.addClass( classNames )](https:\/\/api.jquery.com\/addClass\/#addClass-classNames)\n  - **classNames**\n    An array of classes to be added to the class attribute of each matched element.\n- #### version added: [1\\.4](https:\/\/api.jquery.com\/category\/version\/1.4\/)[.addClass( function )](https:\/\/api.jquery.com\/addClass\/#addClass-function)\n  - **function**\n    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.\n- #### version added: [3\\.3](https:\/\/api.jquery.com\/category\/version\/3.3\/)[.addClass( function )](https:\/\/api.jquery.com\/addClass\/#addClass-function)\n  - **function**\n    A function returning one or more space-separated class names or an array of 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.\n\nIt'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.\n\nBefore jQuery version 1.12\/2.2, the `.addClass()` method manipulated the `className` *property* of the selected elements, not the `class` *attribute*. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).\n\nAs of jQuery 1.12\/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the `class` *attribute* is used instead. So, `.addClass()` can be used on XML or SVG documents.\n\nMore than one class may be added at a time, separated by a space, to the set of matched elements, like so:\n\n|   |   |\n|---|---|\n| 1 |   |\n\nThis method is often used with `.removeClass()` to switch elements' classes from one to another, like so:\n\n|   |   |\n|---|---|\n| 1 |   |\n\nHere, the `myClass` and `noClass` classes are removed from all paragraphs, while `yourClass` is added.\n\nAs of jQuery 1.4, the `.addClass()` method's argument can receive a function.\n\n|   |   |\n|---|---|\n| 1 2 3 |   |\n\nGiven an unordered list with two `<li>` elements, this example adds the class \"item-0\" to the first `<li>` and \"item-1\" to the second.\n\n## Examples:\n### Example 1\nAdd the class \"selected\" to the matched elements.\n\n|   |   |\n|---|---|\n| 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 |   |\n#### Demo:\n\n### Example 2\nAdd the classes \"selected\" and \"highlight\" to the matched elements.\n\n|   |   |\n|---|---|\n| 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 |   |\n#### Demo:\n\n### Example 3\nAdd the classes \"selected\" and \"highlight\" to the matched elements (3.3+ syntax).\n\n|   |   |\n|---|---|\n| 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 |   |\n#### Demo:\n\n### Example 4\nPass in a function to `.addClass()` to add the \"green\" class to a div that already has a \"red\" class.\n\n|   |   |\n|---|---|\n| 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 34 35 36 37 38 39 40 41 |   |\n#### Demo:","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

2 days ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0.1 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://api.jquery.com/addClass/
Last Crawled	2026-04-16 10:30:23 (2 days ago)
First Indexed	2013-08-16 13:26:33 (12 years ago)
HTTP Status Code	200
Meta Title	.addClass() \| jQuery API Documentation
Meta Description	null
Meta Canonical	null
Boilerpipe Text	.addClass( className ) Returns: jQuery Description: Adds the specified class(es) to each element in the set of matched elements. version added: 1.0 .addClass( className ) className One or more space-separated classes to be added to the class attribute of each matched element. version added: 3.3 .addClass( classNames ) classNames An array of classes to be added to the class attribute of each matched element. version added: 1.4 .addClass( function ) 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. version added: 3.3 .addClass( function ) function A function returning one or more space-separated class names or an array of 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. Before jQuery version 1.12/2.2, the .addClass() method manipulated the className property of the selected elements, not the class attribute . Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents). As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the class attribute is used instead. So, .addClass() can be used on XML or SVG documents. 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" ).addClass( function ( index ) { return "item-" + index; }); Given an unordered list with two <li> elements, this example adds the class "item-0" to the first <li> and "item-1" to the second. Examples: Example 1 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 23 24 25 26 27 28 29 30 31 <!doctype html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > addClass demo </ title > < style > p { margin : 8px ; font-size : 16px ; } .selected { color : blue; } .highlight { background : yellow; } </ style > < script src = "https://code.jquery.com/jquery-4.0.0.js" > </ script > </ head > < body > < p > Hello </ p > < p > and </ p > < p > Goodbye </ p > < script > $( "p" ).last().addClass( "selected" ); </ script > </ body > </ html > Demo: Example 2 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 21 22 23 24 25 26 27 28 29 30 31 <!doctype html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > addClass demo </ title > < style > p { margin : 8px ; font-size : 16px ; } .selected { color : red; } .highlight { background : yellow; } </ style > < script src = "https://code.jquery.com/jquery-4.0.0.js" > </ script > </ head > < body > < p > Hello </ p > < p > and </ p > < p > Goodbye </ p > < script > $( "p" ).last().addClass( "selected highlight" ); </ script > </ body > </ html > Demo: Example 3 Add the classes "selected" and "highlight" to the matched elements (3.3+ syntax). 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 <!doctype html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > addClass demo </ title > < style > p { margin : 8px ; font-size : 16px ; } .selected { color : red; } .highlight { background : yellow; } </ style > < script src = "https://code.jquery.com/jquery-4.0.0.js" > </ script > </ head > < body > < p > Hello </ p > < p > and </ p > < p > Goodbye </ p > < script > $( "p" ).last().addClass( [ "selected" , "highlight" ] ); </ script > </ body > </ html > Demo: Example 4 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 34 35 36 37 38 39 40 41 <!doctype html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > addClass demo </ title > < style > div { background : white; } .red { background : red; } .red .green { background : green; } </ style > < script src = "https://code.jquery.com/jquery-4.0.0.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 > Demo:
Markdown	- [jQuery](https://jquery.com/ "jQuery") - [jQuery UI](https://jqueryui.com/ "jQuery UI") - [jQuery Mobile](https://jquerymobile.com/ "jQuery Mobile") - [Sizzle](https://sizzlejs.com/ "Sizzle") - [QUnit](https://qunitjs.com/ "QUnit") - [Plugins](https://plugins.jquery.com/) - [Contribute](https://contribute.jquery.org/) - [CLA](https://cla.openjsf.org/) - [Style Guides](https://contribute.jquery.org/style-guide/) - [Bug Triage](https://contribute.jquery.org/triage/) - [Code](https://contribute.jquery.org/code/) - [Documentation](https://contribute.jquery.org/documentation/) - [Web Sites](https://contribute.jquery.org/web-sites/) - [Events](https://events.jquery.org/) - [Support](https://jquery.com/support/) - [Learning Center](https://learn.jquery.com/) - [Chat](https://jquery.com/support/) - [Stack Overflow](https://stackoverflow.com/tags/jquery/info) - [Report a bug](https://contribute.jquery.org/bug-reports/) - [OpenJS Foundation](https://openjsf.org/) - [Join](https://openjsf.org/join) - [Members](https://openjsf.org/members) - [jQuery Team](https://jquery.com/team) - [Governance](https://openjsf.org/governance) - [Conduct](https://code-of-conduct.openjsf.org/) - [Projects](https://openjsf.org/projects) ## [jQuery API Documentation](https://jquery.com/ "jQuery API Documentation") Navigation - [Download](https://jquery.com/download/) - [API Documentation](https://api.jquery.com/) - [Blog](https://blog.jquery.com/) - [Plugins](https://plugins.jquery.com/) - [Browser Support](https://jquery.com/browser-support/) - [Version Support](https://jquery.com/support/) # .addClass() * Categories: [Attributes](https://api.jquery.com/category/attributes/) \\| [Manipulation](https://api.jquery.com/category/manipulation/) \> [Class Attribute](https://api.jquery.com/category/manipulation/class-attribute/) \\| [CSS](https://api.jquery.com/category/css/) ## .addClass( className )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) Description: Adds the specified class(es) to each element in the set of matched elements. - #### version added: [1\.0](https://api.jquery.com/category/version/1.0/)[.addClass( className )](https://api.jquery.com/addClass/#addClass-className) - className Type: [String](http://api.jquery.com/Types/#String) One or more space-separated classes to be added to the class attribute of each matched element. - #### version added: [3\.3](https://api.jquery.com/category/version/3.3/)[.addClass( classNames )](https://api.jquery.com/addClass/#addClass-classNames) - classNames Type: [Array](http://api.jquery.com/Types/#Array) An array of classes to be added to the class attribute of each matched element. - #### version added: [1\.4](https://api.jquery.com/category/version/1.4/)[.addClass( function )](https://api.jquery.com/addClass/#addClass-function) - function Type: [Function](http://api.jquery.com/Types/#Function)( [Integer](http://api.jquery.com/Types/#Integer) index, [String](http://api.jquery.com/Types/#String) currentClassName ) =\> [String](http://api.jquery.com/Types/#String) 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. - #### version added: [3\.3](https://api.jquery.com/category/version/3.3/)[.addClass( function )](https://api.jquery.com/addClass/#addClass-function) - function** Type: [Function](http://api.jquery.com/Types/#Function)( [Integer](http://api.jquery.com/Types/#Integer) index, [String](http://api.jquery.com/Types/#String) currentClassName ) =\> [String](http://api.jquery.com/Types/#String) \\| [Array](http://api.jquery.com/Types/#Array) A function returning one or more space-separated class names or an array of 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. Before jQuery version 1.12/2.2, the `.addClass()` method manipulated the `className` property of the selected elements, not the `class` attribute. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents). As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the `class` attribute is used instead. So, `.addClass()` can be used on XML or SVG documents. More than one class may be added at a time, separated by a space, to the set of matched elements, like so: \| \| \| \|---\|---\| \| 1 \| \| This method is often used with `.removeClass()` to switch elements' classes from one to another, like so: \| \| \| \|---\|---\| \| 1 \| \| 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 \| \| Given an unordered list with two `<li>` elements, this example adds the class "item-0" to the first `<li>` and "item-1" to the second. ## Examples: ### Example 1 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 23 24 25 26 27 28 29 30 31 \| \| #### Demo: ### Example 2 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 21 22 23 24 25 26 27 28 29 30 31 \| \| #### Demo: ### Example 3 Add the classes "selected" and "highlight" to the matched elements (3.3+ syntax). \| \| \| \|---\|---\| \| 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 \| \| #### Demo: ### Example 4 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 34 35 36 37 38 39 40 41 \| \| #### Demo: - [Ajax](https://api.jquery.com/category/ajax/) - [Global Ajax Event Handlers](https://api.jquery.com/category/ajax/global-ajax-event-handlers/) - [Helper Functions](https://api.jquery.com/category/ajax/helper-functions/) - [Low-Level Interface](https://api.jquery.com/category/ajax/low-level-interface/) - [Shorthand Methods](https://api.jquery.com/category/ajax/shorthand-methods/) - [Attributes](https://api.jquery.com/category/attributes/) - [Callbacks Object](https://api.jquery.com/category/callbacks-object/) - [Core](https://api.jquery.com/category/core/) - [CSS](https://api.jquery.com/category/css/) - [Data](https://api.jquery.com/category/data/) - [Deferred Object](https://api.jquery.com/category/deferred-object/) - [Deprecated](https://api.jquery.com/category/deprecated/) - [Deprecated 1.3](https://api.jquery.com/category/deprecated/deprecated-1.3/) - [Deprecated 1.7](https://api.jquery.com/category/deprecated/deprecated-1.7/) - [Deprecated 1.8](https://api.jquery.com/category/deprecated/deprecated-1.8/) - [Deprecated 1.9](https://api.jquery.com/category/deprecated/deprecated-1.9/) - [Deprecated 1.10 & 2.0](https://api.jquery.com/category/deprecated/deprecated-1.10-and-2.0/) - [Deprecated 3.0](https://api.jquery.com/category/deprecated/deprecated-3.0/) - [Deprecated 3.2](https://api.jquery.com/category/deprecated/deprecated-3.2/) - [Deprecated 3.3](https://api.jquery.com/category/deprecated/deprecated-3.3/) - [Deprecated 3.4](https://api.jquery.com/category/deprecated/deprecated-3.4/) - [Deprecated 3.5](https://api.jquery.com/category/deprecated/deprecated-3.5/) - [Deprecated 3.7](https://api.jquery.com/category/deprecated/deprecated-3.7/) - [Dimensions](https://api.jquery.com/category/dimensions/) - [Effects](https://api.jquery.com/category/effects/) - [Basics](https://api.jquery.com/category/effects/basics/) - [Custom](https://api.jquery.com/category/effects/custom-effects/) - [Fading](https://api.jquery.com/category/effects/fading/) - [Sliding](https://api.jquery.com/category/effects/sliding/) - [Events](https://api.jquery.com/category/events/) - [Browser Events](https://api.jquery.com/category/events/browser-events/) - [Document Loading](https://api.jquery.com/category/events/document-loading/) - [Event Handler Attachment](https://api.jquery.com/category/events/event-handler-attachment/) - [Event Object](https://api.jquery.com/category/events/event-object/) - [Form Events](https://api.jquery.com/category/events/form-events/) - [Keyboard Events](https://api.jquery.com/category/events/keyboard-events/) - [Mouse Events](https://api.jquery.com/category/events/mouse-events/) - [Forms](https://api.jquery.com/category/forms/) - [Internals](https://api.jquery.com/category/internals/) - [Manipulation](https://api.jquery.com/category/manipulation/) - [Class Attribute](https://api.jquery.com/category/manipulation/class-attribute/) - [Copying](https://api.jquery.com/category/manipulation/copying/) - [DOM Insertion, Around](https://api.jquery.com/category/manipulation/dom-insertion-around/) - [DOM Insertion, Inside](https://api.jquery.com/category/manipulation/dom-insertion-inside/) - [DOM Insertion, Outside](https://api.jquery.com/category/manipulation/dom-insertion-outside/) - [DOM Removal](https://api.jquery.com/category/manipulation/dom-removal/) - [DOM Replacement](https://api.jquery.com/category/manipulation/dom-replacement/) - [General Attributes](https://api.jquery.com/category/manipulation/general-attributes/) - [Style Properties](https://api.jquery.com/category/manipulation/style-properties/) - [Miscellaneous](https://api.jquery.com/category/miscellaneous/) - [Collection Manipulation](https://api.jquery.com/category/miscellaneous/collection-manipulation/) - [Data Storage](https://api.jquery.com/category/miscellaneous/data-storage/) - [DOM Element Methods](https://api.jquery.com/category/miscellaneous/dom-element-methods/) - [Setup Methods](https://api.jquery.com/category/miscellaneous/setup-methods/) - [Offset](https://api.jquery.com/category/offset/) - [Properties](https://api.jquery.com/category/properties/) - [Properties of jQuery Object Instances](https://api.jquery.com/category/properties/jquery-object-instance-properties/) - [Properties of the Global jQuery Object](https://api.jquery.com/category/properties/global-jquery-object-properties/) - [Removed](https://api.jquery.com/category/removed/) - [Selectors](https://api.jquery.com/category/selectors/) - [Attribute](https://api.jquery.com/category/selectors/attribute-selectors/) - [Basic](https://api.jquery.com/category/selectors/basic-css-selectors/) - [Basic Filter](https://api.jquery.com/category/selectors/basic-filter-selectors/) - [Child Filter](https://api.jquery.com/category/selectors/child-filter-selectors/) - [Content Filter](https://api.jquery.com/category/selectors/content-filter-selector/) - [Form](https://api.jquery.com/category/selectors/form-selectors/) - [Hierarchy](https://api.jquery.com/category/selectors/hierarchy-selectors/) - [jQuery Extensions](https://api.jquery.com/category/selectors/jquery-selector-extensions/) - [Visibility Filter](https://api.jquery.com/category/selectors/visibility-filter-selectors/) - [Traversing](https://api.jquery.com/category/traversing/) - [Filtering](https://api.jquery.com/category/traversing/filtering/) - [Miscellaneous Traversing](https://api.jquery.com/category/traversing/miscellaneous-traversal/) - [Tree Traversal](https://api.jquery.com/category/traversing/tree-traversal/) - [Utilities](https://api.jquery.com/category/utilities/) - [Version](https://api.jquery.com/category/version/) - [Version 1.0](https://api.jquery.com/category/version/1.0/) - [Version 1.0.4](https://api.jquery.com/category/version/1.0.4/) - [Version 1.1](https://api.jquery.com/category/version/1.1/) - [Version 1.1.2](https://api.jquery.com/category/version/1.1.2/) - [Version 1.1.3](https://api.jquery.com/category/version/1.1.3/) - [Version 1.1.4](https://api.jquery.com/category/version/1.1.4/) - [Version 1.2](https://api.jquery.com/category/version/1.2/) - [Version 1.2.3](https://api.jquery.com/category/version/1.2.3/) - [Version 1.2.6](https://api.jquery.com/category/version/1.2.6/) - [Version 1.3](https://api.jquery.com/category/version/1.3/) - [Version 1.4](https://api.jquery.com/category/version/1.4/) - [Version 1.4.1](https://api.jquery.com/category/version/1.4.1/) - [Version 1.4.2](https://api.jquery.com/category/version/1.4.2/) - [Version 1.4.3](https://api.jquery.com/category/version/1.4.3/) - [Version 1.4.4](https://api.jquery.com/category/version/1.4.4/) - [Version 1.5](https://api.jquery.com/category/version/1.5/) - [Version 1.5.1](https://api.jquery.com/category/version/1.5.1/) - [Version 1.6](https://api.jquery.com/category/version/1.6/) - [Version 1.7](https://api.jquery.com/category/version/1.7/) - [Version 1.8](https://api.jquery.com/category/version/1.8/) - [Version 1.9](https://api.jquery.com/category/version/1.9/) - [Version 1.11 & 2.1](https://api.jquery.com/category/version/1.11-and-2.1/) - [Version 1.12 & 2.2](https://api.jquery.com/category/version/1.12-and-2.2/) - [Version 3.0](https://api.jquery.com/category/version/3.0/) - [Version 3.1](https://api.jquery.com/category/version/3.1/) - [Version 3.2](https://api.jquery.com/category/version/3.2/) - [Version 3.3](https://api.jquery.com/category/version/3.3/) - [Version 3.4](https://api.jquery.com/category/version/3.4/) - [Version 3.5](https://api.jquery.com/category/version/3.5/) - [Version 3.6](https://api.jquery.com/category/version/3.6/) - [Version 3.7](https://api.jquery.com/category/version/3.7/) - [Version 4.0](https://api.jquery.com/category/version/4.0/) ### Books - [![Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer](https://api.jquery.com/wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg) Learning jQuery Fourth Edition Karl Swedberg and Jonathan Chaffer](https://www.packtpub.com/en-us/product/learning-jquery-fourth-edition-9781782163152) - [![jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa](https://api.jquery.com/wp-content/themes/jquery/content/books/jquery-in-action.jpg) jQuery in Action Bear Bibeault, Yehuda Katz, and Aurelio De Rosa](https://www.manning.com/books/jquery-in-action-third-edition) - [![jQuery Succinctly by Cody Lindley](https://api.jquery.com/wp-content/themes/jquery/content/books/jquery-succinctly.jpg) jQuery Succinctly Cody Lindley](https://www.syncfusion.com/ebooks/jquery) - [Learning Center](https://learn.jquery.com/) - [Chat](https://jquery.com/support/) - [Twitter](https://twitter.com/jquery) - [GitHub](https://github.com/jquery) Copyright 2026 [OpenJS Foundation](https://openjsf.org/) and jQuery contributors. All rights reserved. See [jQuery License](https://jquery.com/license/) for more information. The [OpenJS Foundation](https://openjsf.org/) has registered trademarks and uses trademarks. For a list of trademarks of the [OpenJS Foundation](https://openjsf.org/), please see our [Trademark Policy](https://trademark-policy.openjsf.org/) and [Trademark List](https://trademark-list.openjsf.org/). Trademarks and logos not indicated on the [list of OpenJS Foundation trademarks](https://trademark-list.openjsf.org/) are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation [Terms of Use](https://terms-of-use.openjsf.org/), [Privacy](https://privacy-policy.openjsf.org/), [Code of Conduct](https://code-of-conduct.openjsf.org/), and [Cookie](https://www.linuxfoundation.org/cookies) Policies also apply. [Web hosting by Digital Ocean](https://www.digitalocean.com/) \\| [CDN by Fastly](https://www.fastly.com/) \\| [Powered by WordPress](https://wordpress.org/)
Readable Markdown	## .addClass( className )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) Description: Adds the specified class(es) to each element in the set of matched elements. - #### version added: [1\.0](https://api.jquery.com/category/version/1.0/)[.addClass( className )](https://api.jquery.com/addClass/#addClass-className) - className One or more space-separated classes to be added to the class attribute of each matched element. - #### version added: [3\.3](https://api.jquery.com/category/version/3.3/)[.addClass( classNames )](https://api.jquery.com/addClass/#addClass-classNames) - classNames An array of classes to be added to the class attribute of each matched element. - #### version added: [1\.4](https://api.jquery.com/category/version/1.4/)[.addClass( function )](https://api.jquery.com/addClass/#addClass-function) - 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. - #### version added: [3\.3](https://api.jquery.com/category/version/3.3/)[.addClass( function )](https://api.jquery.com/addClass/#addClass-function) - function A function returning one or more space-separated class names or an array of 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. Before jQuery version 1.12/2.2, the `.addClass()` method manipulated the `className` property of the selected elements, not the `class` attribute. Once the property was changed, it was the browser that updated the attribute accordingly. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents). As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the `class` attribute is used instead. So, `.addClass()` can be used on XML or SVG documents. More than one class may be added at a time, separated by a space, to the set of matched elements, like so: \| \| \| \|---\|---\| \| 1 \| \| This method is often used with `.removeClass()` to switch elements' classes from one to another, like so: \| \| \| \|---\|---\| \| 1 \| \| 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 \| \| Given an unordered list with two `<li>` elements, this example adds the class "item-0" to the first `<li>` and "item-1" to the second. ## Examples: ### Example 1 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 23 24 25 26 27 28 29 30 31 \| \| #### Demo: ### Example 2 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 21 22 23 24 25 26 27 28 29 30 31 \| \| #### Demo: ### Example 3 Add the classes "selected" and "highlight" to the matched elements (3.3+ syntax). \| \| \| \|---\|---\| \| 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 \| \| #### Demo: ### Example 4 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 34 35 36 37 38 39 40 41 \| \| #### Demo:
Shard	53 (laksa)
Root Hash	657907979407719853
Unparsed URL	com,jquery!api,/addClass/ s443