{"id":3452,"date":"2013-04-15T19:05:09","date_gmt":"2013-04-15T19:05:09","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3452"},"modified":"2013-04-15T19:05:09","modified_gmt":"2013-04-15T19:05:09","slug":"jquery-has-selector-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-has-selector-examples\/","title":{"rendered":"jQuery :has() Selector Examples"},"content":{"rendered":"<p>The <em><strong>jQuery has selector<\/strong><\/em> basically selects elements which contain at least one element that matches the specified selector. So this means that for any\u00a0occurrence\u00a0of a target within the source, the target\u00a0is considered to be found. Confusing? Don&#8217;t worry. In this article, I am going to share easy examples that show you how to use the :has() selector in real time. And once you go through the examples, the concept of the :has() selector will be much more clear. Don&#8217;t forget to try the demo.<\/p>\n<p><!--more--><\/p>\n<h2>How to use the jQuery has Selector<\/h2>\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=3452\" 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<p><strong>Here is the basic syntax of the :has() selector in jQuery<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\">$(\":has(selector)\")<\/pre>\n<p>In order to see how it works, let&#8217;s assume that we have set of elements in a web page such as divs, paragraphs, span. Let&#8217;s now see the different examples:n<\/p>\n<p><strong>Common HTML source code for all the following examples:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Common HTML source code for all the following examples:\">&lt;style type=\"text\/css\"&gt;\n.bold {\n\tfont-weight: bold;\n\tfont-size: 120%;\n}\n.divs_container div {\n\tpadding: 10px;\n\tmargin: 10px;\n}\n.yellow {\n\tbackground-color: #FFFF99;\n\tborder: 1px solid #FF0;\n}\n.purple {\n\tbackground-color: #9999FF;\n\tborder: 1px solid #90F;\n}\n.green {\n\tbackground-color: #D7FFD7;\n\tborder: 1px solid #090;\n}\n.blue {\n\tbackground-color: #E1F3FF;\n\tborder: 1px solid #09F;\n}\n.red_text {\n\tcolor: #D70000;\n\tfont-weight: bold;\n}\n.orange {\t\n\tborder: 10px solid #F90;\n\tcolor: #FFF;\n\tfont-size: 200%;\n\tfont-weight:bold;\n\tfont-family: Georgia, \"Times New Roman\", Times, serif;\n\tfont-style: italic;\t\n}\n&lt;\/style&gt;\n\n&lt;div class=\"divs_container\"&gt;\n\n\t&lt;div id=\"my_div1\" class=\"purple\"&gt;This is MY DIV 1&lt;\/div&gt;\n\n  &lt;div id=\"my_div2\" class=\"blue\"&gt;This is MY DIV 2\n\n    \t&lt;div class=\"yellow\"&gt;This is a child DIV&lt;\/div&gt;\n\n    &lt;\/div&gt;        \n\n  &lt;div id=\"my_div3\" class=\"red_text\"&gt;This is MY DIV 3\n\n    \t&lt;p&gt;This is para&lt;\/p&gt;\n\n    &lt;\/div&gt;    \n\n  &lt;p id=\"my_para\" class=\"blue red_text\"&gt;This is a container para &lt;span class=\"bold\"&gt;with some text&lt;\/span&gt;&lt;\/p&gt;\n\n  &lt;p&gt;\n    &lt;label for=\"first_name\"&gt;First Name&lt;\/label&gt;\n    &lt;input type=\"text\" name=\"first_name\" id=\"first_name\"&gt;\n  &lt;\/p&gt;\n  &lt;p&gt;\n    &lt;label for=\"message\"&gt;Message&lt;br&gt;\n    &lt;\/label&gt;\n    &lt;textarea name=\"message\" id=\"message\" cols=\"45\" rows=\"5\" class=\"green\"&gt;Default Text.&lt;\/textarea&gt;\n  &lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;p&gt;\t\n&lt;input type=\"submit\" name=\"sbt_check_div_has_class\" id=\"sbt_check_div_has_class\" value=\"Check if MY DIV 1 has GREEN class\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_div_has_div\" id=\"sbt_div_has_div\" value=\"Check if MY DIV 2 has a DIV in it and alert\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_div_has_para\" id=\"sbt_check_div_has_para\" value=\"Check if MY DIV 3 has para and add GREEN class\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_para_has_span\" id=\"sbt_check_para_has_span\" value=\"Check if PARA has SPAN and REMOVE RED_TEXT class\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_textbox_has_attribute\" id=\"sbt_check_textbox_has_attribute\" value=\"Check if Textbox has CLASS Attribute and alert\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_check_textarea_has_attribute\" id=\"sbt_check_textarea_has_attribute\" value=\"Check if Textarea has CLASS Attribute and to value\"&gt;\n\n&lt;\/p&gt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\"&gt;\n\n$(document).ready(function(){\n\n\/\/Add jQuery code here\n\n});\t\n\n&lt;\/script&gt;<\/pre>\n<h3>Example 1: \u00a0Check if MY DIV 1 has &#8220;green&#8221; class and show alert when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1\">\t$('#sbt_check_div_has_class').on(\"click\", function(e){\t\t\n\n\t\tif( $(\"#my_div1\").hasClass(\"green\") )\n\t\t{\n\t\t\talert('MY DIV 1 has GREEN class');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('MY DIV 1 does NOT have GREEN class');\t\t\t\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 2: \u00a0Check if MY DIV 2 has a DIV inside it and show alert when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">\t$('#sbt_div_has_div').on(\"click\", function(e){\t\t\n\n\t\tif( $(\"#my_div2:has(div)\") )\n\t\t{\n\t\t\talert('MY DIV 2 has a DIV in it.');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('MY DIV 2 DOES NOT have a DIV in it.');\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 3: \u00a0Check if MY DIV 3 has a PARAGRAPH inside it and if yes, add a class to MY DIV 3 when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 3\">\t$('#sbt_check_div_has_para').on(\"click\", function(e){\t\t\n\n\t\t$(\"#my_div3:has(p)\").addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 4: \u00a0Check if MY PARA has a SPAN inside it and if yes, \u00a0remove the &#8220;red_text&#8221; class from para when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 4\">\t$('#sbt_check_para_has_span').on(\"click\", function(e){\t\t\n\n\t\t$(\"#my_para:has(span)\").removeClass('red_text');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 5: \u00a0Check if \u00a0TEXTBOX has &#8220;class&#8221; attribute show alert when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 5\">\t$('#sbt_check_textbox_has_attribute').on(\"click\", function(e){\t\t\n\n\t\tif($(\"#first_name[class]\").length) \n\t\t{\n\t\t\talert('Textbox HAS Class attribute.');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('Textbox does NOT have the Class attribute.');\t\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 6: \u00a0Check if TEXTAREA\u00a0has \u00a0&#8220;class&#8221; attribute, add new value to default value when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 6\">\t$('#sbt_check_textarea_has_attribute').on(\"click\", function(e){\t\t\n\n\t\tif($(\"#message[class]\").length) \n\t\t{\n\t\t\t$(\"#message\").val( $(\"#message\").val() + ' This is new text appended to the Textarea Dynamically!' );\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 7: \u00a0Check if\u00a0DIV has \u00a0children and show alert when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true crayon-selected\" title=\"Example 7\">\t$('#sbt_check_div_children').on(\"click\", function(e){\t\t\n\n\t\tif( $(\"#my_div4\").children().length ) \n\t\t{\n\t\t\talert('MY DIV 4 HAS Children.');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('MY DIV 4 DOES NOT HAVE Children.');\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/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=3452\" 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>That&#8217;s it!<\/h5>\n<p>Do you know of any other ways to use the <em><strong>jQuery :has() selector<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The jQuery has selector basically selects elements which contain at least one element that matches the specified selector. So this means that for any\u00a0occurrence\u00a0of a target within the source, the target\u00a0is considered to be found. Confusing? Don&#8217;t worry. In this article, I am going to share easy examples that show you how to use the [&hellip;]<\/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":[42,43,41],"class_list":["post-3452","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-TG","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3452","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=3452"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3452\/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=3452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}