How to dynamically create multiple UL LI from a loop - javascript/jquery/magento

Question

I am trying to read a global variable created by magento-spConfig and create multiple unordered lists based on it. My Javascript code:

   if(typeof spConfig !='undefined'){
    if(typeof spConfig[0] == 'undefined' ) {
        spConfig[0] = spConfig;
    }
    var index  = 0 , count = spConfig.length?spConfig.length:1;
    for( var index  = 0 ; index<count;index++) {
        if(typeof spConfig != 'undefined' && typeof spConfig[index].config != 'undefined' && typeof spConfig[index].config.attributes != 'undefined') {
            for(var attributeID in spConfig[index].config.attributes) {

               //alert(attributeID) gives (the number of ul's i want)
                var ul = jQuery('<ul id="clone'+attributeID+'"></ul>');

                for(var optionID in spConfig[index].config.attributes[attributeID].options) {
                    var option = spConfig[index].config.attributes[attributeID].options[optionID];
                    if(typeof option == 'object') {

                       // alert(option.label); gives the number of li's i want

                        var li = $('<li>'+option.label+'</li>');
                        jQuery(".price-info").append(li);
                        jQuery(".price-info").append(ul);

                    }
                }
            }
        }
    }
}

At the end, i am hoping to append the Ul's to some content on my page. The code above is only creating empty UL's. The LI's are not populated.

Please help.

Answer 1

You should be appending the li s into the ul first.

ul.append(li);
$('.price-info').append(ul);