JQuery DOM Traversal

Question

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

<tr>
    <td>Bob Jones</td>
    <td class="class-name">
        <a href="/start/1">Workshop</a>
    </td>
    <td>06/04/11</td>
    <td class="last">
         <a href="#" class="button">Delete</a>
    </td>
</tr>

Когда я нажимаю ссылку "Удалить", я ищу слово "Мастерская", и мне интересно, какое из этих средств является наиболее эффективным. Будет ли это: а) подняться на один уровень вверх по дереву к элементу <td> и найти элемент родственного элемента по имени класса, затем ссылку / текстовое значение внутри ... б) подняться на уровень <tr> и выполнить поиск для имени класса и т. д. или в) сделать то, что я не учел.

Кажется, у меня всегда возникают проблемы с пониманием того, когда и как выполнять обход объектов в javascript или jquery, и я хотел знать, почему существуют различные доступные методы и имеет ли значение, как вы добиваетесь конечного результата.

Answer 1

Эта простая схема часто является лучшей:

1. Скажите на простом английском языке, что вы хотите найти.
2. Обрабатывайте результат как псевдокод.
3. Буквально переведите его в код.

В вашем случае это, вероятно,:

I need <b><td class="class-name"></b> on the row to which the clicked element belongs.

Это переводит непосредственно к вашей опции b):

$(this).closest("tr").find("td.class-name")

Answer 2

Это работает: http://jsfiddle.net/JCz6L/

Answer 3

$("td.class-name a", $(this).closest("tr")).text())

$(this).closest("tr").children(":nth-child(2)").children("a").text()

Демо