Javascript – How to select a single element in jQuery

javascriptjquery

I have a table structure that looks like:

<table>
 <tr id="row1">
   <td>
     <div>row 1 content1</div>
   </td>
   <td>
     <div>row 1 content2</div>
   </td>
   <td>
     <div>row 1 content3</div>
   </td>
 </tr>
 <tr id="row2">
   <td>
     <div>row 2 content1</div>
   </td>
   <td>
     <div>row 2 content2</div>
   </td>
   <td>
     <div>row 2 content3</div>
   </td>
 </tr>
 <tr id="row3">
   <td>
     <div>row 3 content1</div>
   </td>
   <td>
     <div>row 3 content2</div>
   </td>
   <td>
     <div>row 3 content3</div>
   </td>
 </tr>
</table>

Using jQuery I am trying to select the DIV in the second cell of the third row. I tried the following (amongst other things):

var d = $('#row3').children(':eq(1)').children(':eq(0)');

What I get back is an array with a single element (the DIV I'm after) and I have to then access using d[0]. Why is jQuery returning a single element array, I thought using the selector above would return the DIV element directly?


@Shog9 – Duh…Ok a light just switched on in my brain, I get it now. Cheers.

Best Solution

If you prefer keeping a jQuery object, you may write instead:

$("selector").first().val()