views:

43

answers:

5

Hi,

I have a simple HTML layout like so:

<html>
  <head>
    <title>HTML Page</title>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <a href="some.html">Text</a>
        </td>
      </tr>
    </table>
  </body>
</html>

I am trying to select the first td with a selector like this:

html > body > table > tr:nth(0) > td:nth(0) > a

Unfortunately this does not seem to work and gives me an error saying "undefined object" when I wrap it in a try catch block.

Has anyone seen this before?

Eef

A: 

I believe you will need to revise that selector to the following:

$('html > body > table > tbody > tr:nth(0) > td').html()

If at all possible I would try to add classes/id's to your elements to avoid potential issues with vague(ish) selectors like this.

HurnsMobile
I have tried adding the tbody but that it is still giving me the error, the reason why I am using selectors like this is because I am getting them return via nokogiri (ruby on rails)
Eef
For testing sake try something even more vague like `$('td:nth(0)').html()` and see what you get. Have you tried alerting out the contents of your selector to see what its value is?
HurnsMobile
+3  A: 

You don't need to start from "html". Think about it: how does that make it any better than just starting with "body"? I don't think you need that parent-child specificity either. I bet that:

$('table td:first')

should be all you need.

Pointy
+2  A: 

"select the first td" - $('td:first') or $('td').first().

See the docs for :first Selector and .first() for more details.

istruble
A: 

most of your selector is useless. Try:

$("td:first > a");

It will select the a child of the first td in the document.

If you have more tables you may want to add this an id, and then you can select it by:

$("#table_id td:first > a");

galambalazs
+1  A: 

tr is not directly inside table, even though it looks like that from your markup. Every row is put inside a thead, tbody or tfoot element, and if you omit the <tbody> start tag, the browser will insert it silently for you. So to select the row you'd have to say:

table>tbody>tr

This is due to a quirk of HTML parsing where start-tags are allowed to be omitted in many cases (eg. if you omit <body>, the browser will assume it was there the first time it meets some page content).

However, XHTML has more regular parsing rules, and an upshot of that is that if the page is parsed in XML mode, there will be no implied tbody. So it's more difficult to write a selector that will match in both cases.

Also, the nth selector is a non-standard jQuery extension to Selectors which will cause the slow JavaScript ‘Sizzle’ selector engine to be used instead of the browser's fast built-in selector engine (where available, ie. not IE6-7). Try to stick to standard CSS Selectors to avoid this.

You are best off avoiding both problems by using DOM-style traversal instead of selectors to get the element you want. DOM itself offers the rows and cells lists on tables and rows, which is probably easier than anything jQuery offers:

var table= $('#someselector table').get(0);   // however you access the table
var cell= table.rows[0].cells[0];             // or whatever rows/column you want
$(cell).doSomething();                        // ...
bobince