如何使用jquery获取祖先div和后代td的单元格值

时间:2016-08-05 12:50:06

标签: jquery

HTML

<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <img src="/uploads/avatars/{{ $user->avatar }}" style="positwidth: 150px; height: 150px; float:left; border-radius: 50%; margin-right: 25px; ">
        <h2>Personal Information</h2>
        <div class="profile">
            <td class="name">Name: {{ $user->name }}</td>
        </div><br/>
        <div class="profile">
            <td class="email">Email Address: {{ $user->email }}</td>
        </div><br/>
        <div class="profile">
            <td class="role">Role: @if($user->is_admin == 1) Admin @else User @endif
            </td>
        </div>

        <div style="margin-left: 175px; margin-top: 20px;">
            <button type="submit" class="btn btn-sm btn-success update_info" data-toggle="modal" data-target="#myModal" style="width: 280px; font-size: 20px; font-weight: bold;">Update Profile</button>
        </div>
    </div>
</div>

脚本

$('.update_info').click(function(event) {
    event.preventDefault();

    //Cloning Modal
    myModal = $('#myModal');

    //get the cell value from the table
    var name = $(this).closest('div.profile').find('td.name').html();
    var email = $(this).closest('div').find('td.email').html();
    var role = $(this).closest('div').find('td.role').html();

    alert(name);
    // and set them in the modal:
    myModal.find('input[name="name"]').val(name);
    myModal.find('input[name="email"]').val(email);
    myModal.find('input[name="role"]').val(role);
});

1 个答案:

答案 0 :(得分:0)

您需要遍历div.col-md-10,这是目标和当前元素this的共同父级。

var parent = $(this).closest('div.col-md-10');

然后你可以使用selector来获取目标元素

var name = parent.find('td.name').html();
var email = parent.find('td.email').html();
var role = parent.find('td.role').html();