Question

我有一个表格设置如下：

@foreach (var item in ViewBag.WatchListCompetitor)
{
    <tr role="row" class="odd">
        <td class="" tabindex="0">@item.SentWord</td>
        <td class="sorting_1">@item.Comment</td>
        <td class="sorting_1">@item.Rating</td>
        <td class="sorting_1">@item.SellerFeedback</td>
        <td class="sorting_1 deleteAction"><i class="fa fa-close"></i></td>
        <td class="idRow" style="display:none;" id="@item.WatchListID">@item.WatchListID</td>
    </tr>
}

我已经定义了这样的onclick事件，以便在＆＃34;删除操作＆＃34;时尝试获取idRow值。被触发......

$(document).ready(function () {
    $('.deleteAction').click(function () {

        console.log($(this).closest("td"));
    });
});

我得到的结果是：

Object { length: 1, prevObject: Object, context: <td.sorting_1.deleteAction>, 1 more… }

如何在触发事件时获取td idRow值？

Answer 1

您可以使用closest到达该行，然后find转到idRow td：

$('.deleteAction').click(function () {
    var $idRowTd = $(this).closest(".odd").find(".idRow");
    var id = $idRowTd.prop("id");
    // use the element and id here
});

总是更喜欢使用closest和find而不是寻找兄弟姐妹：当您更改HTML（例如您包装元素）时，代码保持有效。出于同样的原因，最好寻找一个类（例如".odd"）而不是寻找一个标记（例如"tr"）。

Answer 2

使用课程idRow查找sibling()并检索其id

$('.deleteAction').click(function () {

    console.log($(this).siblings("td.idRow").attr('id'));
});

Answer 3

尝试：

$(document).ready(function () {
    $('.deleteAction').click(function () {
        console.log($(this).closest('tr').find('.idRow').attr('id'));
    });
});

Answer 4

你可以使用JQuery的 .prop（）或 .attr（）来获得所需的paramas。属性和属性在特定情况下可能很重要。 在jQuery 1.6 之前， .attr（）方法有时会在检索某些属性时考虑属性值，这可能会导致行为不一致。从 jQuery 1.6 开始， .prop（）方法提供了一种显式检索属性值的方法，而 .attr（）则检索属性。< / p>

$('.deleteAction').click(function () {
    var $idRowTd = $(this).closest(".odd").find(".idRow").attr("id"); //Before/upto jQuery 1.6;
var $idRowTd = $(this).closest(".odd").find(".idRow").prop("id");//for jQuery 1.6 and above
});

获取jQuery中单击行的ID值

4 个答案: