无法在 Html 表中获取上一行属性

Question

我一直在研究这个 Html 表结构：

<table>
    <tr id='1' pid='p3'><td><button id='1' onClick="get(this,'p3')">1</button></td></tr>
    <tr id='2' pid='p3'><td><button id='2' onClick="get(this,'p3')">2</button></td></tr>
    <tr id='3' pid='p2'><td><button id='3' onClick="get(this,'p2')">3</button></td></tr>
    <tr id='4' pid='p1'><td><button id='4' onClick="get(this,'p1')">4</button></td></tr>
    <tr id='5' pid='p2'><td><button id='5' onClick="get(this,'p2')">5</button></td></tr>
    <tr id='6' pid='p2'><td><button id='6' onClick="get(this,'p2')">6</button></td></tr>
</table>

我的目标是在单击当前表格行内的按钮时获取（'closest , above'）表格行按钮的 id（抱歉，这有点令人困惑）

我就是这样使用 jQuery 的：

function get(elm,pid){
    alert($.nid=$(elm).closest('tr').prev("tr[pid='"+pid+"']").find('button').attr('id'));
}

我发现如果这些行位于另一行之上，则可以毫无问题地获取上一行中按钮的 ID。

但是如果该行更远，则无法获取值；逻辑有什么问题？我哪里错了？

请在此处找到我的解释性小提琴：

http://jsfiddle.net/jtYDP/386/

Answer 1

.prev() 方法选择 first 前一个兄弟元素。如果你传递一个选择器，它只会选择与指定选择器匹配的前一个兄弟。

假设您单击第四个按钮。 get 函数的第二个参数是p1，因为tr 与指定的选择器不匹配 jQuery 返回一个空集合，因此attr 返回undefined。

如果我正确理解了这个问题，您想选择具有相同pid 的前一个tr。您可以使用.prevAll() 和.first() 方法。

$('tr button').on('click', function() {
    var $row = $(this).closest('tr'),
        pid = $row.attr('pid');

    var id = $row.prevAll("tr[pid='"+pid+"']")
                 .first() 
                 .find('button')
                 .attr('id');
});

注意，ID 必须是唯一的。而pid 不是有效属性。您可以改用data-* 属性。