jQuery prepend() within a for loop after having picked up an array from a textarea

Question

Hi and thanks for reading.

I am trying to permit users to paste text into a textarea field and then work with what they pasted.

The application is limited in scope but users will be pasting the contents of a csv file where the first column lines up with div Ids that I have set up.

For some reason, when I alert within this loop it alerts perfectly. The problem is when I try to prepend() the contents instead of alterting them, it just does nothing:

        $('#datainput').submit(function () {
        csvData = $("#csvData").val();
        csvData = csvData.split('\n');
        var iterationNum;
        var contentText;

        return function() {
            for (var i=0, lngth=csvData.length; i < lngth; i+=1) {
                csvData[i] = csvData[i].split(',');
                if (!!$('#' + csvData[i][0]).length){
                    iterationNum = '#' + csvData[i][0]
                    contentText = '<div class=\"percentageLabel\">' + csvData[i][1] + '</div>';
                    $(iterationNum).prepend(contentText); 
                }
            }   

        }();
    });

This on the other hand works (it works when I alert):

    $('#datainput').submit(function () {
        csvData = $("#csvData").val();
        csvData = csvData.split('\n');
        var iterationNum;
        var contentText;

        return function() {
            for (var i=0, lngth=csvData.length; i < lngth; i+=1) {
                csvData[i] = csvData[i].split(',');
                if (!!$('#' + csvData[i][0]).length){
                    iterationNum = '#' + csvData[i][0]
                    contentText = '<div class=\"percentageLabel\">' + csvData[i][1] + '</div>';
                    alert(iterationNum + contentText); 
                }
            }   

        }();
    }); 

I've even tested by replacing the iterationNum variable with an actual id like #MyID for example and it does not work within the loop. Using the each same expression outside of the loop the prepend works:

                        contentText = '<div class=\"percentageLabel\"></div>';
                    $(MyID).prepend(contentText); 

But if I use that code within the loop I get nothing.

Can you spot what I'm doing wrong here?

The first code snippet above is the one I want to work, the others are simply to show what else I've tried

Answer 1

It seems like in:

iterationNum = '#' + csvData[i][0]; /* Don't forget your ;'s! */
contentText = '<div class=\"percentageLabel\">' + csvData[i][1] + '</div>';
$(iterationNum).prepend(contentText);

$(iterationNum) may not be a valid selector. Change it to:

iterationNum = '#' + csvData[i][0]; /* Don't forget your ;'s! */
contentText = '<div class=\"percentageLabel\">' + csvData[i][1] + '</div>';
alert(( $(iterationNum)[0] != null  ));

And tell me whether it alerts true or false.