How do I fix this jQuery additive selector?

Question

Given a table row, I want to get the HTML out of the span element that's in the last td in a row.

I ended up with:

$row.children("td:last").children("span:first").html();

I tried:

$row.children("td:last > span").html();

and

$row.children("td:last span").html();

But neither worked. Is there a way to crunch this into a single selector statement?

Answer 1

Try this:

$row.find(" > td:last > span:first").html()

The first arrow in the find() means it will only look at immediate children of $row to find the last <td>. It's equivalent to: $row.children("td:last") but using find() gives you the extra flexibility to continue searching deeper.

Answer 2

Are there multiple spans? If so, the major difference between the one that worked and the others is that the others are missing the ":first" instruction.

Also, if you use the find method instead, things are likely to work better. The "children" method doesn't necessarily hunt down deeper in the tree.