Get particular instance of a class with a Div

Question

How can I use jQuery to get a particular instance of a class(headerGrid) within a Div(products).

I need to be able to get an instance of the class 'headerGrid' classed span which says "Get this Text". The instance is represented as the value within swap2(). My code is as follows...

          <table id="products">
          ...
          <tr>
          <td>
          <a onclick="swap2(1);"><img src="images/products/thumbs/image.png"/></a>
          </td>
          <td valign="top" class="product-text">
          <span class="headerGrid">Get this Text</span><br /><br />
               text
          </td>
          </tr>
          ...
          </table>

E.g. if onclick="swap2(5);" then I need to get the 5th instance of '.headerGrid'

EDIT

Further more I need to select the text("Get this Text") rather then the object itself. Other wise it returns object [object Object].

I also tried selecting with .innerHTML which returns undefined.

Answer 1

Use the eq() selector. Example:

$("#products span.headerGrid").eq(4) //Zero based index

With your function:

function swap2(n) {
    //Zero based index, subtract 1
    var theText = $("#products span.headerGrid").eq(n - 1).html();
    ...
}

Answer 2

Using the :nth-child selector:

$('#products span.headerGrid:nth-child(5)')