{"id":649,"date":"2012-05-29T09:27:29","date_gmt":"2012-05-29T09:27:29","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=649"},"modified":"2012-05-29T09:27:29","modified_gmt":"2012-05-29T09:27:29","slug":"jquery-select-multiple-classes","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-select-multiple-classes\/","title":{"rendered":"jQuery Select Multiple Classes Examples"},"content":{"rendered":"<p>While dealing with CSS styles using jQuery, it might be desirable at times to make changes as per the requirements. And one of the requirement may be to select multiple classes. So\u00a0in this article, I am going to share easy ways to use<strong> <\/strong><em><strong>jQuery to select multiple classes<\/strong><\/em>. Read on to find out more.<!--more--><\/p>\n<h2>How to use jQuery to Select Multiple Classes &#8211; Examples<\/h2>\n<p><div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=649\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n     Let&#8217;s say you have multiple classes called: &#8220;class1&#8221;,\u00a0&#8220;class2&#8221; and\u00a0&#8220;my_class&#8221;. If you want to target the elements that has all these classes applied to it, you can do it the following way:<\/p>\n<pre class=\"lang:xhtml decode:true\">$('.class1 .class2 .my_class')<\/pre>\n<p>If you want to select an element by using it&#8217;s ID without specifying it&#8217;s class and at the same time, use the classes for finding other elements, you can do it the following way:<\/p>\n<pre class=\"lang:xhtml decode:true\">$('.class1 .class2 .my_class #my_input_box')<\/pre>\n<h3>Example: Remove Blue class from all Divs that have Orange Class and Green Class applied to them<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example: Remove Blue class from all Divs that have Orange Class and Green Class applied to them\">&lt;style type=\"text\/css\"&gt;\n.green {\n\tcolor: #009900;\n}\n.blue {\n\tbackground-color: #DFF2FF;\n}\n.red {\n\tcolor: #D70000;\n\tfont-weight: bold;\n}\n.orange {\t\n\tborder: 10px solid #F90;\n\tfont-size: 200%;\n\tfont-weight:bold;\n\tfont-family: Georgia, \"Times New Roman\", Times, serif;\n\tfont-style: italic;\t\n}\n#my_div3 {\n\tpadding: 10px;\n}\n&lt;\/style&gt;\n\n\t&lt;div id=\"my_div1\" class=\"orange green blue\"&gt;This is MY DIV 1&lt;\/div&gt;\n\n    &lt;br&gt;\n\n\t&lt;div id=\"my_div2\" class=\"orange green red blue\"&gt;This is MY DIV 2&lt;\/div&gt;\n\n    &lt;br&gt;\n\n\t&lt;div id=\"my_div3\" class=\"blue red\"&gt;This is MY DIV 3&lt;\/div&gt;    \n\n&lt;input type=\"submit\" name=\"sbt_remove_class\" id=\"sbt_remove_class\" value=\"Remove Blue Class from all DIVs containing Orange Class and Green Class\"&gt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$(document).ready(function(){\n\n\t\/\/This will add class to the a div that does NOT have any class applied to it already\n\t$('#sbt_remove_class').on(\"click\", function(e){\t\t\n\n\t\t$('.orange, .green').removeClass('blue');\n\n\t\te.preventDefault();\n\n\t});\t\t\t\t\t\t\t\t\n});\t\n\n&lt;\/script&gt;<\/pre>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=649\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>Simple isn&#8217;t it?<\/h5>\n<p>Do you know of any other ways to use <em><strong>jQuery to select multiple classes?<\/strong><\/em> Feel free to share your thoughts by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While dealing with CSS styles using jQuery, it might be desirable at times to make changes as per the requirements. And one of the requirement may be to select multiple classes. So\u00a0in this article, I am going to share easy ways to use jQuery to select multiple classes. Read on to find out more.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[41],"class_list":["post-649","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-at","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=649"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/649\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}