How do I select a single element in jQuery?

Question

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.

Answer 1

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

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

Answer 2

jQuery always returns a set of elements. Sometimes, the set is empty. Sometimes, it contains only one element. The beauty of this is that you can write code to work the same way regardless of how many elements are matched:

$("selector").each(function() {    this.style.backgroundColor = "red"; }); 

Fun!