Quickest way to find an element with jQuery

Question

Given the following html:

<tr>
  <td>Content</td>
  <td>Content</td>
  <td>Content</td>
  <td><img id="imgProductPurchased" runat="server" visible="true" alt="Product Purchased" title="Product Purchased" src="/sitecore/shell/Themes/Standard/Applications/16x16/checkbox.png" /></td>
  <td>
   <asp:PlaceHolder ID="plhPurchased" runat="server">
    <span class="roundButton roundButtonLarge"><a id="hypPurchased" class="registryPurchased" href="#" title="Mark product as purchased" runat="server"><span>
    <em class="registryPurchased"></em>Purchased</span></a> <span class="buttonEndLarge">
    </span></span>
   </asp:PlaceHolder>
  </td>
 </tr>
            <tr>
                    Repeats above
            </tr>

I have a click event on "hypPurchased". When that event fires, I need to access the plhPurchased element, and "imgProductPurchased" elements of THAT row.

EDIT:

I should have stated that this is being built with ASP.NET, and as such, the id's are all unique.

Answer 1

If the click event is on the particular row and the element is a child of that row, you can use context to get the result.

$(".myRow").click(function() {
    var somethingFromMyRow = $(".myChildClassName", this).text();
    alert(somethingFromMyRow);
});

Please note, you shouldn't be duplicating the same ID anywhere on your page, so the example I have supplied uses a class name instead - so imagine you have HTML like this for your example.

<tr class="myRow">
    <td><span class="myChildClassName">Some Text In Row 1</span></td>
    <td>More Stuff</td>
</tr>
<tr class="myRow">
    <td><span class="myChildClassName">Some Text In Row 2</span></td>
    <td>More Stuff</td>
</tr>
<tr class="myRow">
    <td><span class="myChildClassName">Some Text In Row 3</span></td>
    <td>More Stuff</td>
</tr>

Answer 2

id's can't be duplicated in HTML,

Anyway, what you need to do is get to a parent element (go up in the hierarchy until you get the parent element that encompasses the "current" row), then you run the query against it:

jQuery( your_query_string, parent )

Where parent is something you can get using:

parent = query.parent()

For instance:

function click_handler(element)
{
    parent = jQuery(element).parent()
    name = jQuery(".name", parent)
    // do stuff
}

name = jQuery(".name", parent) will get all elements with class name under the parent element.

Answer 3

has Hasen said, you cant duplicate id's in html.

so, apply a class to "plhPurchased" and then:

at the hypPurchased you put onclick="yourFuntion(this)"

function yourFuntion(elem)
{
  var tr=$(elem).closest('tr');
  var _imgProductPurchased = tr.find('img');
  // if you have more then a img per row, you should apply a class to the image to and get it by:
  // tr.find('.imgClass');
  var _plhPurchased=tr.find('.thatClassYouApplyed');
}