{"id":25941,"date":"2020-11-20T10:25:47","date_gmt":"2020-11-20T18:25:47","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=25941"},"modified":"2020-11-20T10:25:50","modified_gmt":"2020-11-20T18:25:50","slug":"jquery-addclass","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/","title":{"rendered":"jQuery methods: addClass()"},"content":{"rendered":"\n<p>The jQuery <code>addClass()<\/code> method gives developers a way to change elements in a more global way. As the method name suggests, we can add a class attribute to a selected element. Why would we want to do this?<br><\/p>\n\n\n\n<p>Let\u2019s take an example of a web page that has some existing elements such as a title, a paragraph, and a button to click that does something. Along with this page is a stylesheet that uses these elements\u2019 class name to style them. Upon clicking the button, existing content can change style, or appearance.<br><\/p>\n\n\n\n<p>We could use the <code>addClass()<\/code> method to insert a new style attribute for the existing content after the button is clicked, which makes it possible to change the styling of existing content using only a line of code. Doing so allows the developer to think about manipulating elements in a styled fashion.<br><\/p>\n\n\n\n<p>Let\u2019s dive deeper into the example and look at how we might code it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How jQuery addClass() Works<\/h2>\n\n\n\n<p>In our example, we are changing an object\u2019s class attribute when our button is clicked. Before we get into this example code, let\u2019s take a look at how <code>addClass()<\/code> works. Suppose we have this HTML:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;title&gt;addClass demo&lt;\/title&gt;\n  &lt;style&gt;\n  p {\n    margin: 8px;\n    font-size: 16px;\n  }\n  .selected {\n    color: blue;\n  }\n  .highlight {\n    background: yellow;\n  }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-3.5.0.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n \n&lt;p&gt;Hello&lt;\/p&gt;\n&lt;p&gt;and&lt;\/p&gt;\n&lt;p&gt;Goodbye&lt;\/p&gt;<\/pre><\/div>\n\n\n\n<p>We are using &lt;style&gt; to include some basic styling for our &lt;p&gt; tag in the &lt;head&gt;. We\u2019ve also included our jQuery API link. In the &lt;body&gt;, we have the words \u201cHello,\u201d \u201cand,\u201d \u201cGoodbye,\u201d wrapped in three separate &lt;p&gt; tags. For us to see how <code>addClass()<\/code> works, let\u2019s refer back to &lt;style&gt;.<br><\/p>\n\n\n\n<p>There are two classes inside &lt;style&gt;. One is \u201cselected,\u201d which renders an attribute of color to the color blue. The other class is \u201chighlight.\u201d This class renders a background attribute as the color yellow. Right now, we can see none of these styles are rendering:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/2p2PCBR5bjidBIo_JC1FfeK2Z86W_3ekw5tvqQdt-LpJ48ddNmmERtd2PeCafviS1PZvieHY-bXTMTg4xyBzyLqcPugBZWEoPbk8y57MbyKajGBucH4fLcTZ6w5k_1uknONdSOmq\" alt=\"\"\/><\/figure>\n\n\n\n<p>The styles aren\u2019t rendering because there aren\u2019t any classes associated with our &lt;p&gt; tags. Rather than going into our HTML and manually writing classes to &lt;p&gt;, we can use <code>addClass()<\/code> to insert any or all class attributes on any or all &lt;p&gt; element.<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;script&gt;\n$(document).ready(() =&gt; {\n  $('p').addClass('selected')\n})\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<p>Here, we are simply selecting all &lt;p&gt; elements and adding to them a class attribute of \u2018selected.\u2019 We expect all instances of our &lt;p&gt; elements to now render in the color blue.&nbsp;<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/nndtqz6adHbh_DSczFnXRkxuLJIsBmBUkZOCmqS5yBtGpqlogRX3qH2b4TcT4ULILsPMngravjjoMx9NFejP2rKF5DbDqIfNykQgOQNDW8I3q16Uil7R9EfFuWUXjg_PTALL_lX5\" alt=\"\"\/><\/figure>\n\n\n\n<p>Just as we expected! The jQuery <code>addClass()<\/code> method is able to accept more than one class attribute as a single argument. For example:&nbsp;<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;script&gt;\n$(document).ready(() =&gt; {\n  $('p').addClass('selected highlight')\n})\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<p>Notice the syntax of including both classes wrapped in one set of parentheses. This renders our &lt;p&gt; elements in both blue and with a background of the color yellow.<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/9C1OuNoPpLD87-dFbN4Aq8i7ERvWuePAP2c01tjFTmxy1Ypg8nYai_tD0avF38QTJLPswmtOVhVPZD953vJLa4KTiBB0vkeL1g45r_ZbKdiJGk5xI3ARmpkQHdkWo6DxbogQY27P\" alt=\"\"\/><\/figure>\n\n\n\n<p>Now that we\u2019ve seen how <code>addClass()<\/code> can add class attributes to elements, let\u2019s return to our original example with a button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using jQuery addClass()<\/h2>\n\n\n\n<p>Here we\u2019ve added a button to our first example:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;title&gt;addClass demo&lt;\/title&gt;\n  &lt;style&gt;\n  p {\n    margin: 8px;\n    font-size: 16px;\n  }\n  .selected {\n    color: blue;\n  }\n  .highlight {\n    background: yellow;\n  }\n  &lt;\/style&gt;\n  &lt;script src=&quot;https:\/\/code.jquery.com\/jquery-3.5.0.js&quot;&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;p&gt;\n&lt;strong&gt;jQuery addClass Example&lt;\/strong&gt;\n&lt;\/p&gt;\n&lt;p&gt;Hello&lt;\/p&gt;\n&lt;p&gt;and&lt;\/p&gt;\n&lt;p&gt;Goodbye&lt;\/p&gt;\n&lt;button&gt;\nClick to add class\n&lt;\/button&gt;<\/pre><\/div>\n\n\n\n<p>The above code now renders a button, but it doesn\u2019t do anything yet. In the previous example, we changed all of the &lt;p&gt; tags at the same time. Now let\u2019s change only one element when the button is clicked. We could do this by incorporating the jQuery <code>click()<\/code> method.&nbsp;<br><\/p>\n\n\n\n<p>As a quick review of the <code>click()<\/code> method, we call it on the object selector we want to attach an event listener to. Then we pass <code>click()<\/code> a callback function as an argument. Remember that a callback function is just a function we pass as an argument to execute later. In this example, the callback function will execute once the button is clicked.<br><\/p>\n\n\n\n<p>Let\u2019s see it in action!<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;script&gt;\n$('button').click(() =&gt; {\n $('p').last().addClass('selected')\n})\n&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<p>In the callback function, we are selecting the &lt;p&gt; elements and calling <code>last()<\/code> to find the last instance of &lt;p&gt;. From here, we add the class attribute of \u2018selected.\u2019 We expect the last &lt;p&gt; element which refers to the word \u201cGoodbye\u201d to change color to blue once the button is clicked.<br><\/p>\n\n\n\n<p>Let\u2019s click the button and find out.&nbsp;<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/jeJ1ra5rwdXLbAmE5jfR4DYeLc6v1wtiiYDWBwjBUkIJKnPEMceKVSk8Yy_kD-R-aUyhLGq48h3cWEGTnXZPEXRsBeiwrZ4ch92Y73ifhusmqfFsxT5qzoj2GuyeAVJPcWZ-GJdM\" alt=\"\"\/><\/figure>\n\n\n\n<p>Exactly what we expected to see! We\u2019ve seen how jQuery <code>addClass()<\/code> can be used generally through changing all &lt;p&gt; elements to the styled classes as soon as the page loads. We\u2019ve also seen how <code>addClass()<\/code> can be used with other jQuery methods such as <code>click()<\/code> to specifically change the class attributes of one &lt;p&gt; element once the selected button is clicked.&nbsp;<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Today, we\u2019ve learned what jQuery <code>addClass()<\/code> is and how it works. We\u2019ve also learned that <code>addClass()<\/code> is extremely flexible in scope and can change multiple class attributes at once. The above examples are meant to be basic illustrations of possible uses for jQuery <code>addClass()<\/code>. To go further, experiment on your own and find ways <code>addClass()<\/code> is useful to your web app.<\/p>\n","protected":false},"excerpt":{"rendered":"The jQuery addClass() method gives developers a way to change elements in a more global way. As the method name suggests, we can add a class attribute to a selected element. Why would we want to do this? Let\u2019s take an example of a web page that has some existing elements such as a title,&hellip;","protected":false},"author":104,"featured_media":11910,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-25941","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":[]},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>jQuery methods: addClass() | Career Karma<\/title>\n<meta name=\"description\" content=\"The jQuery addClass() method allows developers to add a class attribute to selected elements. Read our guide on how to start using addClass().\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/jquery-addclass\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery methods: addClass()\" \/>\n<meta property=\"og:description\" content=\"The jQuery addClass() method allows developers to add a class attribute to selected elements. Read our guide on how to start using addClass().\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/jquery-addclass\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-20T18:25:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-20T18:25:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-splice.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"549\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ryan Manchester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ryan Manchester\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/\"},\"author\":{\"name\":\"Ryan Manchester\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\"},\"headline\":\"jQuery methods: addClass()\",\"datePublished\":\"2020-11-20T18:25:47+00:00\",\"dateModified\":\"2020-11-20T18:25:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/\"},\"wordCount\":798,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/javascript-splice.png\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/\",\"name\":\"jQuery methods: addClass() | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/javascript-splice.png\",\"datePublished\":\"2020-11-20T18:25:47+00:00\",\"dateModified\":\"2020-11-20T18:25:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\"},\"description\":\"The jQuery addClass() method allows developers to add a class attribute to selected elements. Read our guide on how to start using addClass().\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/javascript-splice.png\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/javascript-splice.png\",\"width\":1000,\"height\":549},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/jquery-addclass\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery methods: addClass()\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\",\"name\":\"Ryan Manchester\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"caption\":\"Ryan Manchester\"},\"description\":\"Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.\",\"sameAs\":[\"http:\\\/\\\/www.ryanmanchester.info\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/ryan-manchester-6537a630\\\/\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/ryan-manchester\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"jQuery methods: addClass() | Career Karma","description":"The jQuery addClass() method allows developers to add a class attribute to selected elements. Read our guide on how to start using addClass().","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/","og_locale":"en_US","og_type":"article","og_title":"jQuery methods: addClass()","og_description":"The jQuery addClass() method allows developers to add a class attribute to selected elements. Read our guide on how to start using addClass().","og_url":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-11-20T18:25:47+00:00","article_modified_time":"2020-11-20T18:25:50+00:00","og_image":[{"width":1000,"height":549,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-splice.png","type":"image\/png"}],"author":"Ryan Manchester","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Ryan Manchester","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/"},"author":{"name":"Ryan Manchester","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5"},"headline":"jQuery methods: addClass()","datePublished":"2020-11-20T18:25:47+00:00","dateModified":"2020-11-20T18:25:50+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/"},"wordCount":798,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-splice.png","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/jquery-addclass\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/","url":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/","name":"jQuery methods: addClass() | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-splice.png","datePublished":"2020-11-20T18:25:47+00:00","dateModified":"2020-11-20T18:25:50+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5"},"description":"The jQuery addClass() method allows developers to add a class attribute to selected elements. Read our guide on how to start using addClass().","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/jquery-addclass\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-splice.png","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/javascript-splice.png","width":1000,"height":549},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/jquery-addclass\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery methods: addClass()"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5","name":"Ryan Manchester","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","caption":"Ryan Manchester"},"description":"Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.","sameAs":["http:\/\/www.ryanmanchester.info\/","https:\/\/www.linkedin.com\/in\/ryan-manchester-6537a630\/"],"url":"https:\/\/careerkarma.com\/blog\/author\/ryan-manchester\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/25941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/104"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=25941"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/25941\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/11910"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=25941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=25941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=25941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}