Add array values in jquery each loop

JavaScript
1

I’ve made a code that adds a class for each array index in this way:

<!DOCTYPE HTML>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var serial = [ "one", "two", "three", "four", "five" ];;
                $.each (serial, function(i,val) {
                    $('.elements').append('<div class="n' + i + '"></div>');
                })
            });
        </script>  
    </head>
    <body>
        <div class="container">
            <div class="elements"></div>
        </div>
    </body>
</html>

How can I put each value of my array in each new class. I’ve tried this but I don’t get anything:

<!DOCTYPE HTML>
<html lang="">
    <head>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                var serial = [ "one", "two", "three", "four", "five" ];;
                $.each (serial, function(i,val) {
                    $('.elements').append('<div class="n' + i + '"></div>');
                    $('.elements.n' + i).html(val);
                })
            });
        </script>  
    </head>
       <body>
        <div class="container">
            <div class="elements"></div>
        </div>
    </body>
</html>

Must be something I missed or don’t know how.

2

Just missed a space separator here :slight_smile:

$('.elements .n' + i).html(val);

3

I’d also suggest using JavaScript’s forEach rather than the jquery version.

serial.forEach(function(val, i) {
  var el = $('<div class="n' + i + '"></div>').html(val);
  $('.elements').append('<div class="n' + i + '"></div>');
  $('.elements .n' + i).html(val);
})

You can also build up a string rather than querying and updating the DOM over and over in a loop.

var serial = [ "one", "two", "three", "four", "five"];
var html = serial.map(function(val, i) {
  return '<div class="n' + i + '">' + val + '</div>';
}).join('')
$('.elements').html(html);
2 Likes
4

markbrown4 it works perfect in all three ways. In this case I will use javascript.
Thanks a lot.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.