jQuery：确定从哪个 <tr> 该函数称为

Question

I have a knockout grid that looks like this (nothing special):

When I click Edit, it must determine in which <tr> it was called. For Example I click edit on the first user, it must log in console "1", and so on.

My table's code:

<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>

This is my attempt:

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

What am I missing?

Answer 1

You can rather use .closest() for traversing to closest tr parent.

IF tr elements are not siblings of each other: pass that object to method .index() on tr collection:

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

IF tr elements are siblings of each other:

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

Answer 2

I would have done this as below-

By giving a class to parent tr-

<tr class="parent">

And then-

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

Because if the case is nested tr(s) then parent() wont' be working for longer.