Simple hierarchical selector gives weird results
I've got a bit of HTML which I cannot change.
I need to operate on that pre-generated code and extract some data.
jQuery is usually suitable but this time I'm getting very strange results.
code looks like this (I will skip useless data)
-
<html>
<body>
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td>
<table>
<tr></tr>
<tr></tr>
<tr>
<td>
<a href="" class='red'></a>
<a href="" class='red'></a>
</td>
<td>
<p><a href="" class='red'>link*</a></p>
<a href="" class='red'></a>
</td>
</tr>
</table>
<!--repeats-->
<table>
<tr></tr>
<tr></tr>
<tr>
<td>
<a href="" class='red'></a>
<a href="" class='red'></a>
</td>
<td>
<p><a href="" class='red'>link*</a></p>
<a href="" class='red'></a>
</td>
</tr>
</table>
<!--repeat-->
<table>
<tr></tr>
<tr></tr>
<tr>
<td>
<a href="" class='red'></a>
<a href="" class='red'></a>
</td>
<td>
<p><a href="" class='red'>link*</a></p>
<a href="" class='red'></a>
</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
I want every single link* that appears in that pattern of nested tables.
So I wrote a piece of code, used some ancestor/descendant selectors but it seems like I'm doing something wrong, I think I misunderstood the idea.
-
1.
$("table table tr:eq(2) td:eq(1) a.red:first").each(function(){...});
2.
$(" table > tr > td > table > tr:eq(2) > td:eq(1) > p > a.red:first").each(function(){...});
3.
$(" table > tbody > tr > td > table > tbody > tr:eq(2) > td:eq(1) > p > a.red:first").each(function(){...});
Each of those pieces of code works in the same way - accesses ONLY the first link*.
And I want every first link* that is inside a paragraph in the second table cell in the third row of the table that is nested inside another table.
It's more that just this case because I think Im missing the idea of those selectors and it may affect my whole experience with jquery.
I hope someone can help me resolve this problem.