Самый быстрый способ найти элемент с помощью jQuery

Question

С учетом следующего 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>

У меня есть событие клика на "hypPurchased". Когда происходит это событие, мне нужно получить доступ к элементу plhPurchased и элементам imgProductPurchased строки THAT.

EDIT:

Я должен был сказать, что он создается с помощью ASP.NET, и поэтому все идентификаторы уникальны.

Answer 1

id нельзя дублировать в HTML,

В любом случае, вам нужно добраться до родительского элемента (подниматься в иерархии до тех пор, пока вы не получите родительский элемент, который охватывает «текущую» строку), затем выполнить запрос к нему:

jQuery( your_query_string, parent )

Где родитель - это то, что вы можете использовать:

parent = query.parent()

Например:

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

name = jQuery(".name", parent) получит все элементы с классом name под элементом parent.

Answer 2

Если событие click находится в конкретной строке, а элемент является дочерним для этой строки, вы можете использовать контекст, чтобы получить результат.

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

Обратите внимание, что вам не следует дублировать один и тот же идентификатор в любом месте вашей страницы, поэтому в приведенном мною примере вместо этого используется имя класса - так что представьте, что для вашего примера у вас есть такой HTML-код.

<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 3

сказал Хасен, вы не можете дублировать идентификаторы в html.

Итак, примените класс к "plhPurchased", а затем:

при приобретенной вами цене вы ставите 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');
}