jQuery for loop Examples
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’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 on if you want to find out how loop through array elements using jQuery.
How to Iterate Over Array using for each loop in jQuery
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.
Example: HTML source for iterating over array using for each loop in jQuery
<html> <head> <title>Iterate Over Array using for each loop in jQuery</title> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> </head> <body> <p> <label> <input type="checkbox" name="fruits[]" value="Apple" id="fruits_0"> Apple</label> <br> <label> <input type="checkbox" name="fruits[]" value="Mango" id="fruits_1"> Mango</label> <br> <label> <input type="checkbox" name="fruits[]" value="Watermelon" id="fruits_2"> Watermelon</label> <br> <label> <input type="checkbox" name="fruits[]" value="Strawberry" id="fruits_3"> Strawberry</label> <br> </p> <input type="submit" name="sbt_alert_all" id="sbt_alert_all" value="Alert each elements of array"> <input type="submit" name="sbt_alert_checked" id="sbt_alert_checked" value="Alert Checked elements"> <input type="submit" name="sbt_alert_unchecked" id="sbt_alert_unchecked" value="Alert Unchecked elements"> </body> </html>
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.
Example 1: Iterate Over Array and alert all values along with array key/index number
<script type="text/javascript">
//Alert all values along with array key/index number</pre>
$('#sbt_alert_all').on("click", function(){
$('input[name="fruits[]"]').each(function(index) {
alert(index + ': ' + $(this).text() + $(this).val() );
});
});
</script>Example 2: Iterate Over Array and alert all CHECKED values along with array key/index number
<script type="text/javascript">
//Alert all checked values along with array key/index number
$('#sbt_alert_checked').on("click", function(){
$('input[name="fruits[]"]:checked').each(function(index) {
alert(index + ': ' + $(this).text() + $(this).val() );
});
});
</script>Example 3: Iterate Over Array and alert all UNCHECKED values along with array key/index number
<script type="text/javascript">
//Alert all unchecked values along with array key/index number
$('#sbt_alert_unchecked').on("click", function(){
$('input[name="fruits[]"]:not(:checked)').each(function(index) {
alert(index + ': ' + $(this).text() + $(this).val() );
});
});
</script>That’s it!
Do you know of any other ways to iterate over array elements using for each loop / for loop in jQuery? Feel free to suggest by commenting below.