jquery - 无法获取 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>

我的目标是通过单击当前表行内的按钮来获取(“最近的，上面”)表行按钮的 ID(抱歉，这有点令人困惑)

我这样使用 jQuery:

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

我发现，如果行位于其他行之上，则可以毫无问题地获取前一行中的按钮 id。

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

请在这里找到我的解释性 fiddle :

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

Answer 1

.prev() 方法选择第一个前一个同级元素。如果您传递一个选择器，则仅当它与指定的选择器匹配时，它才会选择前一个同级。

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

如果我正确理解了这个问题，您想选择具有相同 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-* 属性。