{"id":1420,"date":"2012-11-04T15:57:57","date_gmt":"2012-11-04T15:57:57","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1420"},"modified":"2012-11-04T15:57:57","modified_gmt":"2012-11-04T15:57:57","slug":"jquery-for-loop-iterate-over-array-using-for-each-loop-in-jquery","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-for-loop-iterate-over-array-using-for-each-loop-in-jquery\/","title":{"rendered":"jQuery for loop Examples"},"content":{"rendered":"<p>If you are working with arrays, then at point or the other, you may have felt the need to iterate over array elements and get their individual values, etc. It&#8217;s very easy to <em><strong>iterate over array elements using for loop in jQuery<\/strong><\/em> and can be done using just couple of lines of code. So read on if you want to find out how loop through array elements using jQuery.<!--more--><\/p>\n<h2>How to Iterate Over Array using for each loop in 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=1420\" 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>Consider that we have an array of fruits names and we want to iterate over this array so that we can alert the individual values of this array.<\/p>\n<h3>Example: HTML source for iterating over array using for each loop in jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Iterate Over Array using for each loop in jQuery&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;p&gt;\n&lt;label&gt;\n&lt;input type=\"checkbox\" name=\"fruits[]\" value=\"Apple\" id=\"fruits_0\"&gt;\nApple&lt;\/label&gt;\n&lt;br&gt;\n&lt;label&gt;\n&lt;input type=\"checkbox\" name=\"fruits[]\" value=\"Mango\" id=\"fruits_1\"&gt;\nMango&lt;\/label&gt;\n&lt;br&gt;\n&lt;label&gt;\n&lt;input type=\"checkbox\" name=\"fruits[]\" value=\"Watermelon\" id=\"fruits_2\"&gt;\nWatermelon&lt;\/label&gt;\n&lt;br&gt;\n&lt;label&gt;\n&lt;input type=\"checkbox\" name=\"fruits[]\" value=\"Strawberry\" id=\"fruits_3\"&gt;\nStrawberry&lt;\/label&gt;\n&lt;br&gt;\n&lt;\/p&gt;\n&lt;input type=\"submit\" name=\"sbt_alert_all\" id=\"sbt_alert_all\" value=\"Alert each elements of array\"&gt;\n&lt;input type=\"submit\" name=\"sbt_alert_checked\" id=\"sbt_alert_checked\" value=\"Alert Checked elements\"&gt;\n&lt;input type=\"submit\" name=\"sbt_alert_unchecked\" id=\"sbt_alert_unchecked\" value=\"Alert Unchecked elements\"&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>Now I am going to show you ways to access the array values and indices based upon the situation, when the button is clicked. Following are the jQuery source codes for each case.<\/p>\n<h3>Example 1: Iterate Over Array and alert all values along with array key\/index number<\/h3>\n<pre class=\"lang:js decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\/\/Alert all values along with array key\/index number&lt;\/pre&gt;\n$('#sbt_alert_all').on(\"click\", function(){\n\n$('input[name=\"fruits[]\"]').each(function(index) {\nalert(index + ': ' + $(this).text() + $(this).val() );\n});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<h3>Example 2: Iterate Over Array and alert all CHECKED values along with array key\/index number<\/h3>\n<pre class=\"lang:js decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\n\/\/Alert all checked values along with array key\/index number\n$('#sbt_alert_checked').on(\"click\", function(){\n\n$('input[name=\"fruits[]\"]:checked').each(function(index) {\nalert(index + ': ' + $(this).text() + $(this).val() );\n});\n\n});\n\n&lt;\/script&gt;<\/pre>\n<h3>Example 3: Iterate Over Array and alert all UNCHECKED values along with array key\/index number<\/h3>\n<pre class=\"lang:js decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\/\/Alert all unchecked values along with array key\/index number\n$('#sbt_alert_unchecked').on(\"click\", function(){\n\n$('input[name=\"fruits[]\"]:not(:checked)').each(function(index) {\nalert(index + ': ' + $(this).text() + $(this).val() );\n});\n\n});\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=1420\" 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 <em><strong>iterate over array elements using for each loop \/ for loop in jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are working with arrays, then at point or the other, you may have felt the need to iterate over array elements and get their individual values, etc. It&#8217;s very easy to iterate over array elements using for loop in jQuery and can be done using just couple of lines of code. So read [&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":[40,42,41],"class_list":["post-1420","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-2","tag-jquery-demos-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-mU","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1420","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=1420"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1420\/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=1420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}