{"id":3458,"date":"2013-04-18T19:05:31","date_gmt":"2013-04-18T19:05:31","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3458"},"modified":"2013-04-18T19:05:31","modified_gmt":"2013-04-18T19:05:31","slug":"jquery-selector-parent-element","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-selector-parent-element\/","title":{"rendered":"jQuery :parent Selector Examples"},"content":{"rendered":"<p>The <em><strong>jQuery parent selector<\/strong><\/em> basically\u00a0select all elements that that have at least one child node. This child node could be either an element or text. That said, we will see how to use the :parent selector by means of easy to follow examples. Read on to find out more.<\/p>\n<p><!--more--><\/p>\n<h2>How to use the jQuery parent 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=3458\" 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>In order to see how to use the parent selector, let us assume that we have few different elements on a web page, such as nested divs, paragraph tag, span tag, hyperlink, etc. So let&#8217;s see different combinations of using the parent tag and how it can be used to manipulate the DOM elements.<\/p>\n<h3>Example 1: Find parent of MY DIV 1 and alert the result when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1\">\t$('#sbt_find_mydiv1_parent').on(\"click\", function(e){\t\t\t\n\n\t\tif( $('.divs_container #my_div1').parent('div').length )\n\t\t{\n\t\t\talert('MY DIV 1 has a parent Div.');\t\n\t\t}\n\t\telse\n\t\t{\n\t\t\talert('MY DIV 1 DOES NOT have a parent Div.');\t\n\t\t}\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 2: Find parent of MY DIV 4 and add GREEN class to it when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">\t$('#sbt_find_mydiv4_parent').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container #my_div4').parent('div').addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 3: Find parent of MY DIV 6 and remove all classes from it when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 3\">\t$('#sbt_find_mydiv6_parent').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container #my_div6').parent('div').removeClass();\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 4: Add &#8220;red_text&#8221; class to all paragraphs \u00a0using the Parent Child Selector when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 4\">\t$('#sbt_parent_child_selector').on(\"click\", function(e){\t\t\n\n\t\t$(\".divs_container &gt; p\").addClass('red_text');\t\t\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 5: Change href source of all hyperlinks when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 5\">\t$('#sbt_change_href').on(\"click\", function(e){\t\t\t\n\n\t\t$(\".divs_container a\").prop(\"href\", \"https:\/\/theextremewebdesigns.com\/blog\/\");\n\n\t\talert('New HREF source for all hyperlinks is https:\/\/theextremewebdesigns.com\/blog\/');\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=3458\" 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 the <em><strong>jQuery\u00a0<\/strong><strong><em>parent selector<\/em><\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The jQuery parent selector basically\u00a0select all elements that that have at least one child node. This child node could be either an element or text. That said, we will see how to use the :parent selector by means of easy to follow examples. 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":[42,43,41],"class_list":["post-3458","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-TM","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3458","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=3458"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3458\/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=3458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}