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> 

我期待得到了這個詞「車間」點擊「刪除」鏈接時，我想知道這是這樣做的最有效的手段。是否需要：a）沿樹的上一級到<td>元素，並通過類名找到兄弟元素，然後在裏面找到鏈接/文本值; b）進入<tr>級別並搜索class-名字等等，或者c）做一些我沒有考慮過的事情。

我總是在理解何時以及如何在javascript或jquery中執行dom遍歷時遇到麻煩，並且想知道爲什麼在可用的不同方法背後，以及它是否重要如何達到最終結果。

Answer 1

這種簡單的模式往往是最好的：

1. 說簡單的英語，你想找到的東西。
2. 將結果視爲僞代碼。
3. 將其直接轉換爲代碼。

在你的情況下，它可能是：

I need <td class="class-name"> 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() 

Demo