javascript - jQuery DOM 遍历

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>

我希望在单击“删除”链接时获得“Workshop”一词，我想知道哪种方法最有效。是 a) 在树上上一层到 <td>元素并按类名找到同级元素，然后是其中的链接/文本值... b) 上升到 <tr>级别并搜索类名等，或者 c) 做一些我没有考虑过的事情。

我似乎总是难以理解何时以及如何在 javascript 或 jquery 中进行 dom 遍历，并且想知道不同可用方法背后的原因，以及如何获得最终结果是否重要。

Answer 1

这个简单的模式通常是最好的:

1. 用通俗易懂的英语说出您想查找的内容。
2. 将结果视为伪代码。
3. 直接将其翻译成代码。

在你的情况下，它可能是:

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

This translates directly to your b) option:

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