javascript - 每次我点击 .approvers > a 时我都无法获取 tr id 名称

Question

我有这个代码

<tr class="job-order__row" id="accounting" style="display:none;">
  <td>1</td>
  <td>Doe</td>
  <td>John</td>
  <td>Accounting Personnel</td>
  <td>
    <div class="actions pull-right approvers">
      <a href="#"><i class="fa fa-close" title="remove approvers"></i></a>
    </div>
  </td>
</tr>
<tr class="job-order__row" id="hr" style="display:none;">
  <td>2</td>
  <td>Doe</td>
  <td>Luke</td>
  <td>HR Personnel</td>
  <td>
    <div class="actions pull-right approvers">
      <a href="#"><i class="fa fa-close" title="remove approvers"></i></a>
    </div>
  </td>
</tr>
<tr class="job-order__row" id="crm" style="display:none;">
  <td>3</td>
  <td>Doe</td>
  <td>Mark</td>
  <td>CRM Personnel</td>
  <td>
    <div class="actions pull-right approvers">
      <a href="#"><i class="fa fa-close" title="remove approvers"></i></a>
    </div>
  </td>
</tr>

和 javascript/jquery 代码

$(document).on('click', '.approvers > a', function(e) {
    e.preventDefault();
    var $id = $('.approvers > a').parents('tr').attr('id');
    $('#'+$id).hide();
  });

问题是，当我尝试单击此处的任何 .approvers > a 这部分时 代码中的$('.approvers > a').parents('tr').attr('id');仅返回Id名称"crm"。

我想要做的是每次点击 .approvers > a 我都会得到 tr id 名称。

有人有同样的问题吗？

谢谢

Answer 1

@Tushar 所说的是使用 $(this) 来引用单击的元素，使用 closest() 来获取第一个父元素。

$(document).on('click', '.approvers > a', function(e) {
    e.preventDefault();
    var $id = $(this).closest('tr').attr('id');
    alert($id)
    $('#'+$id).hide();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="job-order__row" id="accounting" style="">
  <td>1</td>
  <td>Doe</td>
  <td>John</td>
  <td>Accounting Personnel</td>
  <td>
    <div class="actions pull-right approvers">
      <a href="#"><i class="fa fa-close" title="remove approvers"></i>click</a>
    </div>
  </td>
</tr>
<tr class="job-order__row" id="hr" style="">
  <td>2</td>
  <td>Doe</td>
  <td>Luke</td>
  <td>HR Personnel</td>
  <td>
    <div class="actions pull-right approvers">
      <a href="#"><i class="fa fa-close" title="remove approvers"></i>click</a>
    </div>
  </td>
</tr>
<tr class="job-order__row" id="crm" style="">
  <td>3</td>
  <td>Doe</td>
  <td>Mark</td>
  <td>CRM Personnel</td>
  <td>
    <div class="actions pull-right approvers">
      <a href="#"><i class="fa fa-close" title="remove approvers"></i>click</a>
    </div>
  </td>
</tr>
</table>