jQuery：判断从哪个<tr>调用函数

Question

我有一个看起来像这样的淘汰赛网格（没什么特别的）：

当我单击“编辑”时，它必须确定它是在哪个 <tr> 中调用的。例如，我在第一个用户上单击编辑，它必须登录控制台“1”，依此类推。

我的table的代码：

<table class="table table-striped table-bordered table-condensed" data-bind='visible: users().length > 0'>
    <thead>
        <tr>
            <th>UserId</th>
            <th>Username</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Email</th>
            <th>Date</th>
            <th />
        </tr>
    </thead>
    <tbody data-bind='foreach: users'>
        <tr>
            <td>
                <label data-bind="text: UserId" />
            </td>
            <td>
                <input data-bind='value: Username' />
                <label data-bind="text: Username" />
            </td>
            <td>
                <input data-bind='value: FirstName' />
                <label data-bind="text: FirstName" />
            </td>
            <td>
                <input data-bind='value: LastName' />
                <label data-bind="text: LastName" />
            </td>
            <td>
                <input data-bind='value: Email' />
                <label data-bind="text: Email" />
            </td>
            <td>
                <input data-bind='value: Date' />
                <label data-bind="text: Date" />
            </td>
            <td class="tools">
                <a class="Apply" href="#" data-bind="click: $root.applyUser">Apply</a>
                <a class="Edit" href="#" data-bind="click: $root.editUser">Edit</a>
                <a class="Update" href="#" data-bind='click: $root.updateUser'>Update</a>
                <a class="Delete" href='#' data-bind='click: $root.removeUser'>Delete</a>
            </td>
        </tr>
    </tbody>
</table>

这是我的尝试：

$('a.Edit').click(function () {
                    var rowIndex = $(this).parent()
                                          .parent()
                                          .children()
                                          .index($(this).parent());
                    console.log('Row: ' + rowIndex);
                });

我错过了什么？

Answer 1

您可以使用 .closest() 遍历到最近的 tr 父级。

如果 tr 元素不是彼此的兄弟姐妹： 将该对象传递给 tr 集合上的方法 .index()：

 $('tr').index($(this).closest('tr'));

IF tr 元素互为兄弟姐妹：

 $(this).closest("tr").index()

Answer 2

我会像下面那样做-

通过给父 tr-class

<tr class="parent">

然后-

$(this).closest('tr.parent').index()

因为如果案例是嵌套的 tr(s) 那么 parent() 将不会工作更长时间。

jQuery：判断从哪个<tr>调用函数

jQuery: Determine from which <tr> the function is called

javascript

jquery

knockout.js