jQuery:如何导航表行以获取单元格数据

Question

我正在尝试导航已单击的表行,以从行的其他部分提取数据.

这是单击的行的HTML片段:

<tr><td class=" sorting_1">Foobar</td>
    <td>Hello</td><td><a href="/some/path/abc.html">42</a></td>
    <td>0</td>
    <td><img src="/images/img.gif"></td>
    <td>7:44 AM</td>
    <td><ul><li><a href="/path2/read/3">Read it</a></li>
            <li><a class="booboo" href="#">Just do it</a></li>
        </ul></td>

单击的单元格元素具有类"booboo".

我希望能够选择以下数据:

• 在前一个li兄弟的url中使用的id(在上面给出的例子中它是3)
• 第一列中的名称(在给出的示例中为'Foobar')
• 第二个单元格中的锚元素的url(在此示例中应为/some/path/abc.html)

任何人都可以指出导航表格行所需的功能,最好使用一个片段显示如何选择上面显示的示例代码段中的值吗？

Answer 1

登山者没有山 ......

$("table a.booboo").click(function() {
    var $this = $(this);
    var tr = $this.closest("tr"); 

    // the id used in the url of the previous li a sibling
    var a = $this.closest("ul").find("li:first a").attr("href");
    a = a.substring(a.lastIndexOf("/") + 1);
    alert(a);

    // the name in the first column
    var b = tr.find("td:first").text();
    alert(b);

    // the url of the anchor elem in the 2nd cell
    var c = tr.find("td:eq(2) a").attr("href");
    alert(c);
});

演示jsFiddle