JQuery: Lea cada línea de un elemento

Question

Supongamos que tengo esta marcado HTML:

<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> 

¿Cuál es la forma más fácil de leer cada línea de código presente en el div. ¿Cómo extraigo cada línea de código de ese div o bucle sobre cada estilo de línea de la manera que quiera?

Gracias

Editar:

He añadido la etiqueta pre después de la clase de contenedor, tenga en cuenta que también. Gracias

Answer 1

¿Quiere decir algo como esto:

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

Dado que este es el texto (y no html) se debe tratar como tal. La única forma de hacerlo es leerlo y luego usar rutinas de análisis de cadenas.

Answer 2

La mayoría sólo necesita tener Javascript recta:

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 

Algunos navegadores recortará el primer salto de línea, otros no, por lo que hay un par de casos de borde (sin juego de palabras). Pero eso es básicamente eso.