Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Read each line of an element in jQuery

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.

like image 387
Sarfraz Avatar asked Apr 07 '10 14:04

Sarfraz


2 Answers

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.

like image 64
kgiannakakis Avatar answered Oct 17 '22 00:10

kgiannakakis


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.

like image 35
T.J. Crowder Avatar answered Oct 17 '22 01:10

T.J. Crowder