Iterating through table rows in nested divs

Question

I have a page that contains a couple of layers of nested div tags. Within the the 8 or 9 of the divs are tables. How do I iterate through the divs and pick the specific divs that I want and then iterate through the cells in the table (one row) embedded in each of the divs? Here is a representative sample of the page that I want to iterate through.

<div id="TheHouseDiv" class="catbox_m">
  <div class="Room1Div">
     <table width="900" border="0">
       <tbody>
         <tr>
           <td><a href="/blah/blah1.html">I don't care about this value</a></td>
           <td><a href="/blah/blah2.html">I WANT THIS VALUE 1!</a></td>
           <td><a href="/blah/blah3.html">I WANT THIS VALUE TOO 2!</a></td>
           <td><a href="/blah/blah4.html">Another cell I don't want</a></td>
           <td><a href="/blah/blah5.html">THIS CELL I WANT ALSO</a></td>
         <tr>
       </tbody>
     </table>
     <table width="900" border="0">
       <tbody>
         <tr>
           <td><a href="/blah/blah1.html">Ignore this value in the second table</a></td>
           <td><a href="/blah/blah2.html">I WANT THIS VALUE</a></td>
           <td><a href="/blah/blah3.html">I WANT THIS VALUE TOO</a></td>
           <td><a href="/blah/blah4.html">Ignore this content</a></td>
           <td><a href="/blah/blah5.html">GET THIS CELL VALUE</a></td>
         <tr>
       </tbody>
     </table>
   </div>
   <div class="Room2Div">
     <table width="900" border="0">
       <tbody>
         <tr>
           <td><a href="/blah/blah1.html">I don't care about this value</a></td>
           <td><a href="/blah/blah2.html">I WANT THIS VALUE 1!</a></td>
           <td><a href="/blah/blah3.html">I WANT THIS VALUE TOO 2!</a></td>
           <td><a href="/blah/blah4.html">Another cell I don't want</a></td>
...

You get the idea. So there is one table within each div and multiple divs. There are actually between 8 and 10 divs. None of the tables or cells have IDs so I need to reference the positionally. However I don't want all of the cell nor all of the tables. I only want values from specific cells in each of the tables within each div although I want the same cells from every table. Would I iterate through this or just reference the specific cells I want and if so, how do I select them?

Answer 1

$('#TheHouseDiv div').eq(1).find('table').eq(2).find('tr').eq(3).find('td').eq(4).text()

A bit verbose, but I believe this retrieves the text of the 4th <td> inside the 3rd <tr> of the 2nd <table> from the first <div> contained in #TheHouseDiv.

You can also use the shortcut .find('tr:first') to match the first one.

Answer 2

This gives you all the tds which you want. (if you don't understand the selector just post a comment and I will explain it.

$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4))")

e.g. to loop over the hrefs of the <a> tags inside these tds

$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4)) a")
    .each(function(i, ele) {
        alert(ele.href);
    }
);

e.g. to loop over the text of the <a> tags inside these tds

$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4)) a")
    .each(function(i, ele) {
        alert($(ele).text()); //or ele.innerHTML if no nasty is in the <a> tags
    }
);