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.

Edit:

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

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.

Edit:

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

• javascript
• jquery
• html
• css

• 2 I assume you have white-space: pre in the CSS for #wrapper or something? – T.J. Crowder Commented Apr 7, 2010 at 14:05
• 1 That is evil in it's purest form. – googletorp Commented Apr 7, 2010 at 14:11

2 Answers 2

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.

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.