Fill a div container with the alphabet with jquery

Question

So I'me fairly new to coding Jquery. I wanted to load dynamically all letters of the alphabet inside a container.

Currently I got it build up like this:

<div class="letters">
    <div>A</div>
    ...
    <div>Z</div>
</div>

I would like to load each letter inside of the .letters with a div tag.

How would you do this?

Thnx for the help in advance,

You are actually meant to make an attempt yourself and then show the code where you are having problems — Pete, Sep 01 '16 at 10:15
What do you want? To put every letter in (as the title says) or get every letter out (like the post says)? What are the inputs and outputs we're talking about? — Whothehellisthat, Sep 01 '16 at 10:18

score 1 · Accepted Answer · answered Sep 01 '16 at 10:17

Here is how i would make it:

function genCharArray(charA, charZ) {
    var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
    for (; i <= j; ++i) {
        a.push(String.fromCharCode(i));
    }
    return a;
}

var array = genCharArray('a', 'z');

for(var i=0; i<array.length; i++) {
  $('#alphabet').append('<div>' + array[i] + '</div>')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="alphabet"></div>

I build a function to generate an array of the alphabet (so you can chose if you want the full alphabet or only from a certain letter to another, or you can also chose to use the capitalize alphabet by using genCharArray('A', 'Z') and then use a for loop to iterate it and generate the divs.

score 1 · Answer 2 · answered Sep 01 '16 at 10:18

1

Try this :

$(document).ready(function(){
    for(var i = 0; i < 26; i++) {
        var char = String.fromCharCode(65+i);
        $("#letters").append("<div>"+char+"</div>");
    }
});

Use 65 to get Capital letters, 97 for lowercase.

answered Sep 01 '16 at 10:18

Kevin Grosgojat

1,386
8
13

score 0 · Answer 3 · answered Sep 01 '16 at 10:16

0

for (var i = 65; i <= 90; i++) {
    $('.letters').append('<div>' + String.fromCharCode(i) + '</div>');
}

answered Sep 01 '16 at 10:16

Damien DUPRAZ

107
6

2

Please, explain your code – Castro Roy Sep 01 '16 at 17:44

score 0 · Answer 4 · answered Sep 01 '16 at 10:25

You could iterate the ASCII codes of the alphabet letters (which are between 65 and 90 if you need capital letters), then create a div, the text of which contains the corresponding alphabet letter (by using the JavaScript String.fromCharCode function), and finally append it to .letters (with the jQuery appendTo method).

for (i = 65; i <= 90; i++) {
  $("<div></div>").text(String.fromCharCode(i)).appendTo(".letters");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="letters"></div>

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

Javascript code (using jQuery)

// Let's build a function for building the alphabet array
function getAlphabet(first, last) {
    var alphabet = [];
  
  for (i = first.charCodeAt(0); i <= last.charCodeAt(0); ++i) {
    alphabet.push(String.fromCharCode(i));
    }
    
  return alphabet;
}

// Calling the function
var alphabet = getAlphabet('A', 'Z'); // ["a", ..., "z"]

// Printing the array inside the .letters element
$.each(alphabet, function (index, element) {
    $(".letters").append("<div>" + element + "</div>");
});

Try it on JSFiddle.

Explanation

I have made a function that is able to build an array containing the alphabet. Then, we store that in a variable and, finally, we use jQuery .each() method that allows us to go throw the array and, inside each iteration, we can use .append() in order to add the letters inside the div.

Fill a div container with the alphabet with jquery

5 Answers5

Javascript code (using jQuery)

Explanation