Jquery - Adding html before each new line in an array

Question

I've been working on trying to style the html CODE element by adding an ordered list on top of its content and then aa LI and a P before each new line, with their closing tags added to the end of each line.

This is what I have:

     $("#mydiv code").each(function(){
        var oldcontent = $(this).html();
        $(this).html("<span class='olnumbers'></span><ol class='code'>" + oldcontent + "</ol>");
        var lines = oldcontent.split(/[\n\r]/g);
        $.each(lines, function(e){
                $(this).html("<li><p>" + lines + "</p></li>");
        });

 });

This simply doesn't work. I get no errors, I don't know what is wrong. Does anybody know how to fix this?

Thanks!

Answer 1

You cant use this within the each function.

http://api.jquery.com/jQuery.each/

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collection The object or array to iterate over.

callback(indexInArray, valueOfElement) The function that will be executed on every object.

Try this instead:

var html = [];
$.each(lines, function(i, val){
                html.push("<li><p>" + val + "</p></li>");
        });
$(this).html(html.join(''));