Question

I am currently creating list on the fly with jQuery. The solution below is somewhat hacky I know, so I am wondering if its possible to stick it in a loop, so I can iterate through each div and create the list. Thanks for your help!!

         var text0 = $('#d0').text(); 
         var textArr0 = text0.split('*');

         var text1 = $('#d1').text(); 
         var textArr1 = text1.split('*');

         var text2 = $('#d2').text(); 
         var textArr2 = text2.split('*');

         $("#d0").html('<ul></ul>');
         $("#d1").html('<ul></ul>');
         $("#d2").html('<ul></ul>');


         $.each(textArr0, function (k, v) {
            $("#d0 ul").append('<li>' + '<a>' + v + '</a>' +  '</li>');
         });

         $.each(textArr1, function (k, v) {
            $("#d1 ul").append('<li>' + '<a>' + v + '</a>' +  '</li>');
         });

         $.each(textArr2, function (k, v) {
            $("#d2 ul").append('<li>' + '<a>' + v + '</a>' +  '</li>');
         });

Answer 1

This is a tidied version of what you’ve already got…

$(function() {
    $("#d0, #d1, #d2").each(function() {
        var text = $(this).text();
        var textArr = text.split("*");
        $(this).html("<ul></ul>");
        for(var i = 0; i < textArr.length; i++) {
            $(this).find("ul").append('<li><a>' + textArr[i] + '</a></li>');
        };
    });
});

But, I’d recommend giving the elements d0/d1/d2 etc. a class and use $(".className") to identify them so you can have as many or as few as you like without having to change that code.

Here’s a demo… http://jsfiddle.net/77vM9/