JQuery: Read each line of an element

Question

Hello,

Suppose I have this html markup:

<div id="wrapper">
 <pre class="highlight">
    $(function(){
    // hide all links except for the first
    $('ul.child:not(:first)').hide();
    $("a.slide:first").css("background-color","#FF9900");

    $('ul.parent a.slide').click(function(){
        $('ul.parent a.slide').css("background-color","#3399FF");

        $('ul.parent a.slide').mouseout(function(){
            $(this).css("background-color","#3399FF");
        });

        $('ul.parent a.slide').mouseover(function(){
            $(this).css("background-color","#66CC66");
        });
    });
    });
  </pre>
</div>

What is the easiest way to read each line of code present in the div. How do I extract each line of code from that div or loop over each line styling in any way I want.

Thanks

Edit:

I have added the pre tag after the wrapper class, please consider that also. Thanks

Answer 1

Do you mean something like this:

var lines = $("#wrapper pre").text().split("\n");
$.each(lines, function(n, elem) {
            console.log(elem);
          });

Since this is text (and not html) you should treat it as such. The only way to do it is to read it and then use string parsing routines.

Answer 2

Mostly just need straight JavaScript:

var text;

text = $('#wrapper pre').text(); // Or .html, doesn't really matter with the input you showed
text = text.replace("\r\n", "\n"); // Just in case
text = text.split("\n");
// text is now an array of lines

Some browsers will trim the first line break, some won't, so there are a couple of edge cases (no pun). But that's basically it.