Get particular instance of a class with a Div

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="swap开发者_Python百科2(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.

---

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();
    ...
}

---

Using the :nth-child selector:

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

---

Use $("#products span.headerGrid:nth-child(5)"), which will return the 5th span with class headerGrid in your element with ID products.

Function swap could look like this:

function swap(n){
    var element = $("#products span.headerGrid:nth-child(" + n + ")");
    //Rest of code
}

Small notice: You've mentioned DIV(products) in your question, but your code shows table.