All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

jQuery Foreach Array

Last Updated : Mar 11, 2024

jQuery Foreach Array

In this article we will show you the solution of jQuery foreach array, here we are going to show you example array with forEach loop to print array numbers sum value on webpage with some string by using h3 tag id ‘res’.

As we know forEach loop is used to iterate some same process for particular amount of time so we can reduce time and space to avoids repeat of some code in same program.

Step By Step Guide On jQuery Foreach Array :-

Here we defined button ‘Click’ with id attribute for generates process and h3 element defined with id attribute.

In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and we waiting for click() method’s click event occurrence which is added on button.

Within this we initialized ‘sum’ variable, array variable ‘arr’ appends with forEach loop.

In loop we declared function ‘valFun’. In valFun method definition we adding array values with each other and it’s total displayed on webpage.

<!DOCTYPE html>
<html>
    <head>
        <title>ARRAY FOREACH</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                    $("button").click(function(){
                        let sum=0;
                        const arr=[23,89,09];
                        arr.forEach(valFun);
                        function valFun(i){
                            sum+=i;
                        }
                        $("#res").append("Array Numbers Sum Is "+sum);
                    });
                })
        </script>
        </head>
        <body>
            <button id="btn">Click</button>
            <h3 id="res"></h3>
        </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Here we imported open source jquery library support file which is needed for coding using jquery in program.
  5. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  6. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  7. In script we defined ready() method within that we added click method with button element by tag name ‘button’.
  8. Within function we defined variable ‘sum’ with value ‘0’ and array variable ‘arr’ defined with values ‘23,89,09’. Then we appended forEach loop with array ‘arr’ there we declared function ‘valFun’.
  9. In valFun() function, the ‘i’ refers iteration value with the help of forEach loop we iterating each values in array ‘arr’ then we adding all values and result of sum is stored on variable ‘sum’. Result appended on h3 element by using id ‘res’ for shows on webpage.
  10. In html block we defined button ‘Click’ with id attribute ‘btn’ and h3 tag with id ‘res’.
  11. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to use forEach loop with array in jquery.

Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.

When we executes program on browser we can see ‘click’ button, now user needs to clicks on it then it will shows sum of array values on webpage i.e ‘Array Numbers Sum Is 121’.

I hope this article on jQuery foreach array helps you and the steps and method mentioned above are easy to follow and implement.