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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With