Iterating through table rows in nested divs
I have a page that contains a couple of layers of nested div tags. Withi开发者_运维百科n 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?
This gives you all the td
s 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 href
s of the <a>
tags inside these td
s
$("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 td
s
$("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
}
);
$('#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.
精彩评论