.parents()不适用于表

Question

我正在尝试使用AJAX JQuery在用户列表中显示用户详细信息，但它不能像我需要的那样工作。它适用于同一tr中的第一个详细信息，但不适用于第二行中的td中的第二个详细信息。我该怎么做才好呢？

代码如下：

我的观点是：

<table class="table">
        <thead>
            <th>#</th>
            <th>name</th>
            <th>password</th>
            <th></th>
        </thead>
        <tbody>
        @foreach($users as $user)
            <tr>
                <table class="table">
                    <tr>
                        <td>{{$user->id}}</td>
                        <td>{{$user->name}}</td>
                        <td>{{$user->password}}</td>
                        <td class="extend-user" data-details="0" data-url="{{route("user", ["id" => $user->id])}}">Details</td>
                        <td id="details">a</td>
                    </tr>
                    <tr>
                        <td colspan="5" id="details">a</td>
                    </tr>
                </table>
            </tr>
        @endforeach  
        </tbody>       
    </table>

还有我的脚本：

    $(".extend-user").click(function() {
    var self = this;

    if($(self).data("details")===0)
    $.ajax({
        method: "POST",
        url: $(self).data("url"),
        data: {
            _token: $("#_token").val()
        },
        success: function(data) {
            $(self).parents().find("#details").append(data["name"]);
            //$(self).parent().parent().find("#details").append(data["name"]);
            //$(self).closest('table').find("#details").append(data["name"]);;
            $(self).data("details", "1");
        }
    });
    if($(self).data("details")===1) {
        $(self).data("details", "0");
        $(self).parent().find("p.details").html("");
    }
});

Answer 1

尝试使用$(self).closest("table").find("#details").append(data["name"]);

最接近查找要查找的最接近的父元素。

Answer 2

替换

$(self).parents().find("#details").append(data["name"]);

使用

$(self).parents('tr').find("#details").append(data["name"]);