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 a a 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(''));