{"id":3437,"date":"2013-03-27T19:15:58","date_gmt":"2013-03-27T19:15:58","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3437"},"modified":"2013-03-27T19:15:58","modified_gmt":"2013-03-27T19:15:58","slug":"jquery-select-div-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-select-div-examples\/","title":{"rendered":"jQuery Select Div Examples"},"content":{"rendered":"<p>Have you ever wondered of how many different possibilities exist when it comes to dealing with divs? In this article, I am going to share different ways of selecting divs by means of easy examples. You will see how to select first div, parent div, last div, div with class, child div, previous div, div inside another div, etc. easily by using single line of code in jQuery.<\/p>\n<p><!--more--><\/p>\n<h2>How to perform different Select operations on a Div using jQuery<\/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=3437\" 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>For the sake of the example, let&#8217;s assume that we have some nested divs in our web page. We will now see how to select a\u00a0specific\u00a0div element in different cases and add a class to it for better understanding. Here we go:<\/p>\n<p><strong>Common HTML source for all the following examples:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Common HTML source for all the following examples:\">&lt;style type=\"text\/css\"&gt;\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.blue {\t\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.green {\n\tbackground-color: #D7FFD7;\n\tborder: 1px solid #090;\n}\n.divs_container div {\n\tpadding: 10px;\n\tmargin: 10px;\n}\n&lt;\/style&gt;\n\n&lt;div class=\"divs_container\"&gt;\n\n\t&lt;div id=\"my_div1\" class=\"blue\"&gt;This is MY DIV 1\n\n   \t  &lt;div id=\"my_div2\" class=\"purple red_text\"&gt;This is MY DIV 2\n\n      \t&lt;div id=\"my_div3\" class=\"yellow\"&gt;This is MY DIV 3\n\n        \t&lt;div id=\"my_div4\" class=\"yellow\"&gt;This is MY DIV 4&lt;\/div&gt;    \n\n        &lt;\/div&gt;    \n\n        &lt;div id=\"my_div5\" class=\"yellow\"&gt;This is MY DIV 5&lt;\/div&gt;    \n\n      &lt;\/div&gt;\n\n      &lt;div id=\"my_div6\" class=\"yellow\"&gt;This is MY DIV 6&lt;\/div&gt;    \n\n    &lt;\/div&gt;\n\n\t&lt;div id=\"my_div7\" class=\"yellow\"&gt;This is MY DIV 7&lt;\/div&gt;    \n\n\t&lt;div id=\"my_div8\" class=\"yellow\"&gt;This is MY DIV 8&lt;\/div&gt;        \n\n\t&lt;p&gt;&amp;nbsp;&lt;\/p&gt;    \n\n&lt;\/div&gt;\n\n&lt;p&gt;\t\n&lt;input type=\"submit\" name=\"sbt_select_first_div\" id=\"sbt_select_first_div\" value=\"Select FIRST DIV and add Class to it \"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_select_last_div\" id=\"sbt_select_last_div\" value=\"Select LAST DIV and add Class to it \"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_select_parent_div\" id=\"sbt_select_parent_div\" value=\"Select PARENT DIV of DIV 4 and add Class to it \"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_select_div_with_class\" id=\"sbt_select_div_with_class\" value=\"Select the DIV with class PURPLE and alert ID\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_select_child_div\" id=\"sbt_select_child_div\" value=\"Select CHILD DIV of DIV 2 and add Class to it \"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_select_previous_div\" id=\"sbt_select_previous_div\" value=\"Select PREVIOUS DIV of DIV 8 and add Class to it\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_select_next_div\" id=\"sbt_select_next_div\" value=\"Select NEXT DIV of DIV 3 and add Class to it \"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_select_div_inside_div\" id=\"sbt_select_div_inside_div\" value=\"Select the DIV 6 inside DIV 1 and add Class to it \"&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: Select the first div in the document and add Green class to it when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1\">\t$('#sbt_select_first_div').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container div:first').addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 2:\u00a0Select the last div in the document\u00a0and add Green class to it when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">\t$('#sbt_select_last_div').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container div:last').addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 3: Select the Parent div of Div 4\u00a0and\u00a0and add Green class to it when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 3\">\t$('#sbt_select_parent_div').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container #my_div4').parent().addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 4: Select all Divs with purple class and alert their ID\u00a0when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 4\">\t$('#sbt_select_div_with_class').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container div.purple').each(function(index) {\n\n\t\t    alert( $(this).attr('id') );\n\t\t});\t\t\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 5: Select Child Div of Div 2 and\u00a0add Green class to it when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 5\">\t$('#sbt_select_child_div').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container #my_div2').children().addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 6: \u00a0Select Previous Div of Div 8\u00a0and add Green class to it when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 6\">\t$('#sbt_select_previous_div').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container #my_div8').prev().addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 7: Select Next Div of Div 3\u00a0and add Green class to it when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 7\">\t$('#sbt_select_next_div').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container #my_div3').next().addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 8: \u00a0Select Div 6 Inside Div 1\u00a0and add Green class to it when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true crayon-selected\" title=\"Example 8\">\t$('#sbt_select_div_inside_div').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container #my_div1 &gt; #my_div6').addClass('green');\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=3437\" 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>Over to You!<\/h5>\n<p>Do you know of any other ways to make <em><strong>div\u00a0selections\u00a0using jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever wondered of how many different possibilities exist when it comes to dealing with divs? In this article, I am going to share different ways of selecting divs by means of easy examples. You will see how to select first div, parent div, last div, div with class, child div, previous div, div [&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-3437","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-Tr","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3437","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=3437"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3437\/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=3437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}