Question

I am looking for a jQuery function to parse a section of HTML and read (store in a variable) from the first <td> inside the div class=”appArea” and continue reading HTML until it reaches the table with a class of class=”tb_pages”, then stop.

I think I need an each() function but can’t get it to work.

<div class="appArea">

<p class="cstmTitle">Team Wilson</p>
<table width="100%" cellpadding="5" cellspacing="0" border="0">
<tr valign="top">
<td>

<p>
<p>We are proud to do our part to change the future and make a positive impact in the lives of others.</p>
<p><strong>Bullet List Ex</strong>:</p>
<ul>
<li>First</li>
<li>Second </li>
</ul>

<table class="tb_pages" border="0">
<thead>
<tr>
<th>Bacon</th>

Answer 1

My ‘solution’ that’s a little less ugly, but pays for it in efficiency:

var myHTML = "", isReading = false;

$(".appArea").children().each(function() {
    if(this.tagName == "td") isReading = true;
    else if($(this).hasClass("tb_pages") isReading = false;
    if(isReading) myHTML += $(this).html();
});

Or a solution using my favorite if shorthand, slightly more ugly but equally slightly more efficient:

var myHTML = "", isReading = false;

$(".appArea").children().each(function() {
    this.tagName == "td" && (isReading = true);
    $(this).hasClass("tb_pages") && (isReading = false);
    isReading && (myHTML += $(this).html());
});

---

Or an alternative to iambriansreed‘s answer, using slice() instead of split() (should be slightly faster, but just as ugly):

var $fullHTML = $(".appArea").html()
var myHTML = fullHTML.slice(fullHTML.indexOf("<td>"), fullHTML.indexOf('<table class="tb_pages"'));