{"id":3381,"date":"2013-03-27T19:05:01","date_gmt":"2013-03-27T19:05:01","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3381"},"modified":"2013-03-27T19:05:01","modified_gmt":"2013-03-27T19:05:01","slug":"jquery-eq-selector-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-eq-selector-examples\/","title":{"rendered":"jQuery :eq() Selector Examples"},"content":{"rendered":"<p>Ever wanted to select an element using a specific index number but wondered how to do it? If yes, then the <em><strong>jQuery e<\/strong><strong><em>q selector\u00a0<\/em><\/strong><\/em>is right for you. In this article, I am going to share easy examples that show how to use the :eq() selector in real time.<\/p>\n<p><!--more--><\/p>\n<h2>How to use the jQuery eq 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=3381\" 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>As I already mentioned, the :eq() selector\u00a0selects an element with a specific index number and\u00a0the index numbers start at 0. Because of this reason, the first element will have the index number 0. The second element will have an index of 1, the third will have an index of 2 and so on.\u00a0For the sake of the example, let&#8217;s assume that we have few elements in a web page such as a div, list item, etc.<\/p>\n<p><strong>Common HTML source code for all following examples:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"Common HTML source code for all following examples:\">&lt;style type=\"text\/css\"&gt;\n.existing_yellow {\n\tbackground-color: #FFFF99;\n\tborder: 1px solid #FF0;\n}\n.existing_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\"&gt;This is MY DIV 1\n\n   \t  &lt;div id=\"my_div2\" class=\"existing_yellow red_text\"&gt;This is MY DIV 2&lt;\/div&gt;\n\n    &lt;\/div&gt;\n\n  &lt;div id=\"my_div3\" class=\"existing_purple\"&gt;This is MY DIV 3&lt;\/div&gt;    \n\n    &lt;div id=\"my_div4\" class=\"existing_yellow\"&gt;This is MY DIV 4&lt;\/div&gt;    \n\n  &lt;ul&gt;\n    &lt;li&gt;List item 1&lt;\/li&gt;\n    &lt;li&gt;List item 2&lt;\/li&gt;\n    &lt;li&gt;List item 3&lt;\/li&gt;\n    &lt;li&gt;List item 4&lt;\/li&gt;\n    &lt;li&gt;List item 5&lt;\/li&gt;\n  \t&lt;\/ul&gt;\n\n  &lt;table width=\"100%\" border=\"1\" cellspacing=\"1\" cellpadding=\"1\"&gt;\n      &lt;tr&gt;\n        &lt;td&gt;R1C1&lt;\/td&gt;\n        &lt;td&gt;R1C2&lt;\/td&gt;\n        &lt;td&gt;R1C3&lt;\/td&gt;\n        &lt;td&gt;R1C4&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;R2C1&lt;\/td&gt;\n        &lt;td&gt;R2C2&lt;\/td&gt;\n        &lt;td&gt;R2C3&lt;\/td&gt;\n        &lt;td&gt;R2C4&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;R3C1&lt;\/td&gt;\n        &lt;td&gt;R3C2&lt;\/td&gt;\n        &lt;td&gt;R3C3&lt;\/td&gt;\n        &lt;td&gt;R3C4&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;R4C1&lt;\/td&gt;\n        &lt;td&gt;R4C2&lt;\/td&gt;\n        &lt;td&gt;R4C3&lt;\/td&gt;\n        &lt;td&gt;R4C4&lt;\/td&gt;\n      &lt;\/tr&gt;\n  &lt;\/table&gt;\n&lt;\/div&gt;\n\n&lt;p&gt;\t\n&lt;input type=\"submit\" name=\"sbt_div_index\" id=\"sbt_div_index\" value=\"Add Green class to DIV with 1 as index\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_list_index\" id=\"sbt_list_index\" value=\"Add Green class to List Item with 4 as index\"&gt;\n\n&lt;input type=\"submit\" name=\"sbt_table_cells\" id=\"sbt_table_cells\" value=\"Add Green Class to Table Cells with 3, 4 and 7 index\"&gt;\n\n&lt;br&gt;\n\n&lt;input type=\"button\" name=\"sbt_reset\" id=\"sbt_reset\" value=\"Reset everything\"&gt;\n&lt;\/p&gt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$(document).ready(function(){\n\n\/\/Put all jQuery code here\n\n});\t\n\n&lt;\/script&gt;<\/pre>\n<h3>Example 1: Using :eq() selector to target a specific div and change it&#8217;s color<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 1\">\t$('#sbt_div_index').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container div:eq(1)').addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 2: Using :eq() selector to target a specific list item and change it&#8217;s color<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 2\">\t$('#sbt_list_index').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container ul li:eq(4)').addClass('green');\n\n\t\te.preventDefault();\n\n\t});<\/pre>\n<h3>Example 3: Using :eq() selector to target a specific cell\u00a0(nth child)\u00a0\u00a0of a table and change it&#8217;s color<\/h3>\n<pre class=\"lang:xhtml decode:true\" title=\"Example 3\">\t$('#sbt_table_cells').on(\"click\", function(e){\t\t\t\t\n\n\t\t$('.divs_container table td:eq(3), .divs_container table td:eq(4), .divs_container table td:eq(7)').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=3381\" 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 of using the <em><strong>jQuery\u00a0eq selector<\/strong><\/em>? Please feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ever wanted to select an element using a specific index number but wondered how to do it? If yes, then the jQuery eq selector\u00a0is right for you. In this article, I am going to share easy examples that show how to use the :eq() selector in real time.<\/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-3381","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-Sx","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3381","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=3381"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3381\/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=3381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}