{"id":3151,"date":"2013-03-22T07:39:36","date_gmt":"2013-03-22T07:39:36","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3151"},"modified":"2013-03-22T07:39:36","modified_gmt":"2013-03-22T07:39:36","slug":"jquery-closest-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-closest-examples\/","title":{"rendered":"jQuery .closest() Method Examples"},"content":{"rendered":"<p>If you are wondering how to find the closest element of an existing element in a web page, then the <em><strong>jQuery closest method<\/strong><\/em> is the way to go. In this article, I am going to share easy examples that show how to use it.<\/p>\n<p><!--more--><\/p>\n<h2>How to use jQuery closest method<\/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=3151\" 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>So here&#8217;s what the .closest() method will do:<\/strong>\u00a0For each element in the set, it will get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.<\/p>\n<p>Now let&#8217;s consider an example. Let&#8217;s assume that we have some nested divs. One of the divs has a button in it and when this button is clicked, we want to highlight the closest div by changing its background color. The other button that exists in the div, when clicked upon, will remove the highlighted background from the closest div.<\/p>\n<h3>Example: Find the closest div and highlight it when button is clicked and remove this highlight when another button is clicked using the .closest() method<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example: Find the closest div and highlight it when button is clicked and remove this highlight when another button is clicked.\">&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: 100%;\n\tfont-weight:bold;\n\tfont-family: Georgia, \"Times New Roman\", Times, serif;\n\tfont-style: italic;\t\n}\n#my_div1, #my_div2, #my_div3 {\n\tpadding: 15px;\n\tmargin: 5px;\n}\n&lt;\/style&gt;\n\n\t&lt;div id=\"my_div1\" class=\"orange green\"&gt;This is MY DIV 1\n\n\t&lt;div id=\"my_div2\" class=\"orange green red\"&gt;This is MY DIV 2\n\n\t&lt;div id=\"my_div3\" class=\"orange red\"&gt;This is MY DIV 3\n\n    \t&lt;p&gt;\n    \t&lt;input type=\"submit\" name=\"sbt_find_closest_div\" id=\"sbt_find_closest_div\" value=\"Find Closest div and highlight it with Blue color\"&gt;\n\n        &lt;input type=\"submit\" name=\"sbt_remove_from_closest_div\" id=\"sbt_remove_from_closest_div\" value=\"Remove Blue Class From Closest Div\"&gt;\n\t\t&lt;\/p&gt;\n\n    &lt;\/div&gt;    \n\n    &lt;\/div&gt;\n\n    &lt;\/div&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_find_closest_div').on(\"click\", function(e){\t\t\n\n\t\t$(this).closest('div').addClass('blue');\n\n\t\te.preventDefault();\n\n\t});\t\n\n\t\/\/This will remove class from closest div\t\t\t\t\t\n\t$('#sbt_remove_from_closest_div').on(\"click\", function(e){\n\n\t\t$(this).closest('div').removeClass('blue');\n\n\t\te.preventDefault();\n\n\t});\t\t\n\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=3151\" 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 \u00a0<em><strong>jQuery closest method <\/strong><\/em>to find closest div or any other element? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are wondering how to find the closest element of an existing element in a web page, then the jQuery closest method is the way to go. In this article, I am going to share easy examples that show how to use it.<\/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-3151","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-OP","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3151","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=3151"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3151\/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=3151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}