jQuery: value() and text() not returning table cell's text

Question

I must be missing something basic here. Enlighten me.

I'm trying to grab the ID (289 in this example):

<tr class="header">
  <th>ID</th>
  <th>2</th>
  <th>3</th>
</tr>

<tr class="highlight">
  <td class="">289</td>
  <td class="">field a</td>
  <td class="">field b</td>
</tr>
... more rows

I'm using this selector:

$("#requests :nth-child(2) td:first")

The Firebug console shows this:

Object { length=1,  more...}

Right on. Grabbing the first element of that:

>>> $("#requests :nth-child(2) td:first")[0]
<td class="">

So, I thought I could call text() or value() or some such method on that.

If I look at the DOM tab in Firebug, I see that I've got "childNodes" and "firstChild" with <TextNode textContent="289"> but I can't figure out how to retrieve that.

Answer 1

You need to write $("#requests :nth-child(2) td:first").text().

Using a jQuery object's indexer ($(...)[0]) will return the raw DOM element.
If you want to call jQuery methods, you need to call them directly on the jQuery object, without using an indexer.
If you want to call a jQuery method on a single element in a jQuery set, call eq, like this: $(...).eq(3).text().

There is no value() method in jQuery.
The val method will set or return the value of a form element.

Answer 2

When you use the bracket notation to grab an object out of the jQuery object, it grabs a raw dom element. Instead use $('selector').eq(0) . Then your methods should work.