up vote 0 down vote favorite

I am trying to create li elements based on the number of values in array. Basically, for every key in an array an li element needs to be created.

<ul class="alpharow">
</ul>
    $(".alpharow").each(function() {

    var alpha = new Array();
        alpha['this'] = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
        alpha['that'] = ['l', 'm', 'n', 'o', 'p', 'q', 'r'];
     var n = alpha.length;

        for (i = 0; i < n; i++) {
            //$("li:eq(" + i + ")");

           var li_tag = '<li class="alpha_li"></li>';
        }

        $(".alpharow").append(li_tag);

        //$("span").text("There are " + n + " kys.");

    });

So, a, b, c etc...would all have their own <li>

Thanks for the help, let me know if something is not clear.

share|improve this question
I suggest stepping back and reading some good tutorials or books on JavaScript. I found JavaScript: The Definitive Guide by David Flanagan quite good. – T.J. Crowder Dec 16 '11 at 10:02

3 Answers

up vote 2 down vote accepted

You have array of arrays. If you need to create LIs for all of them use such sample:

$(".alpharow").each(function() {

    var alpha = new Array();
    alpha['this'] = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    alpha['that'] = ['l', 'm', 'n', 'o', 'p', 'q', 'r'];

    // go thru the main array
    for (var key in alpha) {
        // go thru the inner arrays
        var arr = alpha[key];
        for (i = 0, n = arr.length; i < n; i++) {
            //apped LI's
            $(".alpharow").append($('<li></li>', { class: 'alpha_li', text: arr[i] }));
        }
    }       
});

Code: http://jsfiddle.net/m8vwz/1/

share|improve this answer
Thank you for this – Zack Shapiro Mar 13 at 6:15
up vote 1 down vote

A couple of issues there:

  • This code in the loop serves no purpose: $("li:eq(" + i + ")");
  • Move your $(".alpharow").append(li_tag); into the loop (but don't do the lookup each time, cache the result of $(".alpharow") in a variable at the top, before calling each, and then reuse it).
  • Your alpha is an Array to which you're adding no elements. (Array elements in JavaScript terminology are properties in the array object with names consisting entirely of numerals.) You're adding a couple of properties to it, but they're not elements, so length will be 0.
  • The values of the two properties you have added are each arrays, so you need to loop through them.
share|improve this answer
up vote 1 down vote

It all stems from how you're handling the array. In JS array's don't have defined key names, instead you'd use an object, so this code works:

var alpha = { };
alpha['this'] = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
alpha['that'] = ['l', 'm', 'n', 'o', 'p', 'q', 'r'];

$.each(alpha, function() {
    $.each(this, function() {

        var li_tag = '<li class="alpha_li">' + this + '</li>';

        $(".alpharow").append(li_tag);
    });
});

alpha is changed to an object and we set this and that keys. We then use jQuery's $.each() to loop though the top object and then through each key to get to our array and then add them as li elements.

share|improve this answer
"In JS array's don't have defined key names" They do, in fact. Arrays are objects plus array-like behavior. It's true that he's not using the alpha object as an array, though. – T.J. Crowder Dec 16 '11 at 10:14
That's just splitting hairs now ;) – Ahmed Nuaman Dec 16 '11 at 11:04
@Ahmed: :-) I don't think so, though -- I use the fact that arrays are true objects and so can have arbitrary, non-element properties quite frequently (usually when I'm cross-indexing them). – T.J. Crowder Dec 16 '11 at 11:08

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.